HTML中为图片添加渐变透明度滤镜的实现方案咨询

嘿，我懂你要的这种渐变遮罩效果！之前你找到的是针对background-image的滤镜方法，但<img>标签确实没法直接这么用，不过有两个靠谱的方案能搞定你那一行三张等尺寸图片的需求，我给你详细拆解：

方案一：容器+伪元素（兼容性拉满） #

这是最稳妥的做法，不需要额外加DOM元素，几乎所有浏览器都支持。

先搭好HTML结构

把每张图片都放进一个容器里，方便统一控制布局和遮罩：

<div class="image-row">
  <div class="image-wrap">
    <img src="your-pic-1.jpg" alt="描述图1">
  </div>
  <div class="image-wrap">
    <img src="your-pic-2.jpg" alt="描述图2">
  </div>
  <div class="image-wrap">
    <img src="your-pic-3.jpg" alt="描述图3">
  </div>
</div>

然后写CSS实现效果

/* 先搞定一行三张的布局，均分宽度 */
.image-row {
  display: flex;
  gap: 12px; /* 图片之间的间距，按需调整 */
}

.image-wrap {
  flex: 1; /* 三张图平分父容器宽度 */
  position: relative; /* 给伪元素做定位基准 */
  overflow: hidden; /* 防止渐变遮罩超出图片范围 */
}

.image-wrap img {
  width: 100%;
  height: auto; /* 保持图片原有比例 */
  display: block; /* 去掉图片底部的默认留白 */
}

/* 关键！用伪元素叠加渐变遮罩 */
.image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* 渐变从底部纯黑（完全不透明）向上过渡到透明 */
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none; /* 不干扰图片的点击、hover等交互 */
}

方案二：CSS mask 属性（简洁现代款） #

如果你的项目不需要兼容IE这类旧浏览器，直接用mask属性更省事，代码少得离谱：

.image-wrap img {
  width: 100%;
  height: auto;
  /* 遮罩渐变：底部不透明，向上逐渐透明 */
  mask: linear-gradient(to top, black, transparent);
  /* 给webkit内核浏览器加前缀，比如Chrome、Safari */
  -webkit-mask: linear-gradient(to top, black, transparent);
}

这个方法不需要伪元素，直接给img标签加mask就行，但要注意mask属性在一些老浏览器里不支持，得根据你的兼容需求选。

小技巧：调整渐变效果 #

你可以修改渐变的参数来微调效果，比如想让暗部只占图片下半部分，可以写成：

background: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);

这样暗部从底部开始占30%高度，然后向上过渡到透明。

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