Tailwind CSS如何为图片添加线性渐变？两种写法均不生效

算力阿峰

2026-8-30

Tailwind 给图片叠加线性渐变的正确实现

原有写法失效原因

第一种写法：将渐变类写在<img>标签上。<img>是替换元素，加载的外部图片会完全覆盖元素自身的背景，设置的渐变被图片遮挡无法显示。
第二种写法：将渐变类写在图片的父容器上。<img>默认是不透明的替换元素，会完全盖住父容器的背景，父级的渐变同样无法透出。

正确实现方案

实现图片叠加渐变的核心逻辑是：在图片上方铺一层带透明度的渐变遮罩层，有两种常用写法：

写法1：独立遮罩层（兼容性最好，逻辑直观）

给父容器设置相对定位，图片和渐变遮罩都用绝对定位铺满父容器，渐变层放在图片DOM节点之后（层级更高，会盖在图片上方）：

<div className="relative h-[70vh] lg:h-[80vh] w-full">
  <img 
    src={BannerImage} 
    alt="BannerImage" 
    className="absolute inset-0 h-full w-full object-cover object-right"
  />
  {/* 渐变遮罩，颜色后缀/70代表70%不透明度，可根据需求调整数值 */}
  <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/70 to-blue-500/70"></div>
</div>

写法2：伪元素实现遮罩（无额外冗余标签）

不需要新增空的div标签，直接通过Tailwind的after伪元素生成渐变遮罩，代码更简洁：

<div className="relative h-[70vh] lg:h-[80vh] w-full after:absolute after:inset-0 after:bg-gradient-to-r after:from-cyan-500/70 after:to-blue-500/70 after:content-['']">
  <img 
    src={BannerImage} 
    alt="BannerImage" 
    className="h-full w-full object-cover object-right"
  />
</div>