如何给img标签添加覆盖在图片上方的渐变颜色效果？

你当前给img标签设置backgroundColor渐变的写法无法生效，是因为img标签加载的图片内容层级高于元素本身的背景，渐变会被图片完全遮挡，只能显示在图片底层。

方案1：父容器包裹+渐变覆盖层（兼容性最好，最常用） #

通过额外的父容器包裹img，新增一层和容器尺寸一致的渐变层放在img上方即可，如果你需要保留img标签的原生特性（如SEO识别、右键保存图片等）优先选这个方案。

内联写法（适配你当前的React内联样式写法） #

<div style={{
  position: 'relative',
  height: '100vh',
  width: '100%'
}}>
  <img 
    style={{
      height: '100%',
      width: '100%',
      objectFit: 'cover' // 可删除，作用是保持图片比例填充容器，避免拉伸
    }} 
    src={data.image} 
    alt="" 
  />
  <div style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%)',
    pointerEvents: 'none' // 确保渐变层不会拦截图片的点击、hover等交互事件
  }} />
</div>

CSS类+伪元素写法（更简洁，无额外DOM节点） #

先写CSS样式：

.img-gradient-box {
  position: relative;
  height: 100vh;
  width: 100%;
}
.img-gradient-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 伪元素作为渐变覆盖层 */
.img-gradient-box::after {
  content: '';
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left均设为0 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  pointer-events: none;
}

业务代码直接调用类名即可：

<div className="img-gradient-box">
  <img src={data.image} alt="" />
</div>

方案2：背景叠加写法（无img标签） #

如果你不需要img标签的原生特性，可以直接把图片和渐变都作为容器的背景实现，注意渐变要写在背景属性的前面，层级才会在图片上方：

<div style={{
  height: '100vh',
  width: '100%',
  background: `linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%), url(${data.image})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center'
}} />

内容的提问来源于stack exchange，提问作者Jose A.