图像 next/js 和顺风不透明度效果答案

【问题标题】：Image next/js and tailwind opacity effect图像 next/js 和顺风不透明度效果
【发布时间】：2021-12-16 01:59:54
【问题描述】：

我想把html标签改成nex/js Image，但是hover的不透明效果已经失效了。

初始代码：

 <div
          className="absolute bg-cover bg-no-repeat h-full w-full group-hover:opacity-0"
          style={{
            height: mediaHeight,
            backgroundImage: `linear-gradient(rgba(15, 41, 55, 0.65), rgba(15, 41, 55, 0.65))`,
          }}
        />
        <img
          src={getAbsUrl(imageUrl)}
          alt={title}
          className="w-full object-cover"
          style={{ height: mediaHeight }}
        />

用下一个/js

<div
          className="absolute bg-cover bg-no-repeat h-full w-full group-hover:opacity-0"
          style={{
            height: mediaHeight,
            backgroundImage: `linear-gradient(rgba(15, 41, 55, 0.65), rgba(15, 41, 55, 0.65))`,
          }}
        />
        <Image
          src={getAbsUrl(imageUrl)}
          alt={title}
          className="w-full object-cover bg-opacity-25"
          layout="fill"
        />

使用 Image 时，图片总是会被点亮，而不仅仅是在悬停时

【问题讨论】：

标签： javascript reactjs next.js tailwind-css

【解决方案1】：

已解决：我在 div 上使用了来自 tailwind 的 zIndex

【讨论】：