如何用CSS为img元素叠加线性渐变？及失败原因排查

失败原因 #

• 层级逻辑错误：你用<div>包裹<img>的结构中，<div>的背景渐变属于父元素的底层背景，而<img>作为子元素默认显示在父元素内容层上方，渐变完全被图片遮挡。
• z-index未生效：z-index仅对非static定位的元素生效，你当前的<div>和<img>都是默认的static定位，设置z-index不会改变层级关系。
• 选择器匹配隐患：CSS中用标签选择器div会选中页面所有<div>，建议使用类选择器.mydiv来精准定位目标元素。

解决方案 #

方法一：父元素伪元素覆盖（推荐，不改动HTML结构） #

通过父元素的伪元素生成渐变层，利用定位将其放在图片上方：

.mydiv {
  position: relative; /* 为伪元素提供定位基准 */
  width: 100%;
  height: 1000px;
}

.mydiv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, black, transparent);
  z-index: 1; /* 确保渐变层在图片上方 */
}

.mydiv img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例填充容器 */
}

方法二：将图片作为父元素背景叠加渐变 #

把图片设为父元素背景，直接与渐变叠加：

.mydiv {
  width: 100%;
  height: 1000px;
  background: 
    linear-gradient(180deg, black, transparent),
    url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center;
}

对应HTML可简化为：

<div class="mydiv"></div>

方法三：图片背景渐变+混合模式 #

若必须保留<img>标签，可通过混合模式让渐变与图片融合：

.mydiv img {
  width: 100%;
  height: 1000px;
  object-fit: cover;
  background: linear-gradient(180deg, black, transparent);
  mix-blend-mode: multiply; /* 可根据需求调整混合模式 */
}

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