为何给img标签添加透明线性渐变CSS类无效果？（Tailwind环境）

为什么添加到img标签无效果 #

img是替换元素，它的内容由src属性指定的图像资源填充，会完全覆盖元素的背景样式。直接给img加opacity-down-gradient类，背景渐变根本不会显示出来。

正确实现方式 #

需要在img外层（或同级）添加一个额外的容器元素，把渐变类应用到这个容器上，同时利用定位让渐变层覆盖在img上方：

修改后的React代码 #

<CarouselItem key={index} className='relative basis-[33%]'>
  <div className='custom-card-shadow relative h-[400px] rounded-lg overflow-hidden'>
    {productSheet.cover?.contentUrl && (
      <>
        <img
          className='h-full w-full rounded-lg object-cover'
          src={productSheet.cover?.contentUrl}
          alt={productSheet.cover?.title ?? ""}
        />
        {/* 添加渐变覆盖层 */}
        <div className='opacity-down-gradient absolute inset-0 rounded-lg'></div>
      </>
    )}
  </div>
</CarouselItem>

关键说明 #

• 渐变层容器设置absolute inset-0，使其完全覆盖父容器（img的容器）
• 父容器保留relative定位，让绝对定位的渐变层以它为参考
• 父容器添加overflow-hidden，避免渐变层超出圆角范围

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