如何不使用绝对定位元素为图片添加遮罩效果

实现黑色20%遮罩的CSS方案 #

首先明确两个常见误区：

1. 你最初写的直接给<img>加::after的方案本身不生效，因为img属于替换元素，W3C规范不支持替换元素使用::before、::after伪元素
2. 你尝试的mask-image属性本身是用来做元素可见区域裁剪的（比如挖空、渐变透明效果），本身不支持叠加彩色遮罩，不适合这个需求

下面是3种可实现同等效果的纯CSS方案： #

方案1：直接使用filter属性

黑色20%遮罩的本质是把图片亮度降低20%，单属性即可实现，匹配你要的效果：

img {
  /* 0.8 对应保留80%原图亮度，等价于叠加20%透明度黑色 */
  filter: brightness(0.8);
}

如果需要更精确控制叠加色，不想影响原图对比度，可以用内嵌SVG滤镜实现：

img {
  filter: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg">\
    <filter id="tint">\
      <feFlood flood-color="black" flood-opacity="0.2" result="tint"/>\
      <feBlend in="SourceGraphic" in2="tint" mode="normal"/>\
    </filter>\
  </svg>#tint');
}

方案2：使用background-blend-mode（背景图场景适用）

如果你的图片是作为背景图渲染的，直接一行混合属性即可：

.box {
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(你的图片地址);
  background-blend-mode: normal;
}

方案3：使用inset box-shadow（不需要写伪元素）

给图片套一层父容器即可实现，不需要额外加伪元素：

/* 父容器样式 */
.img-wrap {
  display: inline-block;
  /* 用足够大的扩散半径实现全覆盖内阴影 */
  box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.2);
}
.img-wrap img {
  position: relative;
  z-index: -1;
  vertical-align: top;
}

内容的提问来源于stack exchange，提问作者clcraft