如何用Tailwind CSS实现图片从底部向上渐变变暗效果？

直接用背景图+渐变遮罩的方式就能实现你要的效果，以下是两种可行的实现方案：

方案一：单独渐变遮罩层（兼容性更好） #

这种方式通过额外的div实现渐变遮罩，结构清晰，适配所有Tailwind版本：

<div class="relative w-full h-96 bg-cover bg-center" style="background-image: url('你的图片路径')">
  <!-- 底部向上的渐变遮罩 -->
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
  <!-- 底部文本 -->
  <div class="absolute bottom-4 left-4 text-white">
    <h3 class="text-xl font-bold">标题文本</h3>
    <p class="text-sm">描述内容</p>
  </div>
</div>

关键类说明： #

• relative：作为内部绝对定位元素的参考容器
• bg-cover bg-center：让背景图自动适配容器尺寸并居中显示
• bg-gradient-to-t from-black/70 to-transparent：创建从下到上的渐变，从70%透明度的黑色过渡到透明，实现底部向上变暗的效果
• absolute bottom-4 left-4：把文本固定在容器的底部左侧位置

方案二：背景叠加写法（更简洁） #

如果使用Tailwind CSS v3及以上版本，可以直接把背景图和渐变写在同一个元素上，减少DOM层级：

<div class="relative w-full h-96 bg-[url('你的图片路径')] bg-cover bg-center bg-gradient-to-t from-black/70 to-transparent">
  <div class="absolute bottom-4 left-4 text-white">
    <h3 class="text-xl font-bold">标题文本</h3>
    <p class="text-sm">描述内容</p>
  </div>
</div>

你可以根据需求调整渐变透明度（比如from-black/80）、容器宽高（比如h-64）以及文本的位置和样式。

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