替换为Next.js Image后Tailwind悬停不透明度效果失效如何解决？

问题原因 #

1. Next.js 使用layout="fill"（新版为fill属性）的Image组件会默认生成相对定位的外层包裹容器，且Image默认层级高于你的半透明蒙层div，导致蒙层被压在图片下方，无法覆盖图片，所以图片始终呈现无蒙层的高亮状态。
2. 你给Image添加的bg-opacity-25仅作用于元素背景，对图片本身显示无影响，属于无效配置。
3. 若两个元素的共同父容器未添加group类，group-hover规则本身也无法生效。

修复方案 #

调整容器定位、元素层级，修正后的代码如下：

{/* 共同父容器必须添加relative和group类，指定高度 */}
<div className="relative group" style={{ height: mediaHeight }}>
  {/* 半透明蒙层，调高z-index保证覆盖在图片上方 */}
  <div
    className="absolute inset-0 bg-cover bg-no-repeat z-10 group-hover:opacity-0 transition-opacity"
    style={{
      backgroundImage: `linear-gradient(rgba(15, 41, 55, 0.65), rgba(15, 41, 55, 0.65))`,
    }}
  />
  {/* Next.js Image组件，层级低于蒙层即可 */}
  <Image
    src={getAbsUrl(imageUrl)}
    alt={title}
    fill
    className="object-cover"
  />
</div>

如果你使用的是Next.js 12及更早版本，把fill属性改回layout="fill"即可正常运行。

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