如何在不新增HTML标记的情况下为img标签添加透明深色遮罩

这问题我之前也碰到过，不用新增任何HTML标记的话，纯CSS就能搞定，给你分享几个靠谱的方案：

方案1：利用背景渐变+混合模式（最推荐） #

这个方法是给img元素直接添加深色渐变背景，再通过背景混合模式让渐变和原图叠加，实现遮罩效果，完全不需要额外标签：

img {
  /* 设置深色半透明渐变背景，0.5是透明度，可根据需求调整 */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  /* 让背景渐变和图片内容混合，multiply/overlay/darken都适用，按需选择 */
  background-blend-mode: multiply;
  /* 确保背景覆盖整个图片区域，避免图片拉伸变形 */
  object-fit: cover;
  /* 可选：如果图片需要占满容器，设置宽高100% */
  width: 100%;
  height: 100%;
}

原理：background-blend-mode会让元素的背景渐变和自身的图片内容叠加混合，渐变的深色半透明层就相当于遮罩了，效果精准可控。

方案2：利用滤镜快速实现（适合简单需求） #

如果不需要精准控制遮罩的渐变效果，只是要整体加深图片，用CSS滤镜更简单：

img {
  /* 降低亮度到50%，数值越小图片越暗，0就是全黑 */
  filter: brightness(0.5);
  /* 可选：如果需要灰度+深色效果，可叠加灰度滤镜 */
  /* filter: brightness(0.5) grayscale(0.3); */
}

缺点：这个是直接调整图片本身的亮度，不是真正的遮罩层，但实现成本低，适合快速满足需求。

注意事项 #

• 方案1里的background-blend-mode支持所有现代浏览器，IE11及以下不兼容，如果需要兼容旧浏览器，优先考虑方案2。
• 如果图片是inline元素，记得先设置display: block或者inline-block，否则背景可能不会生效。

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