如何使用Tailwind实现鼠标悬停时背景图片变暗的效果

问题原因 #

你当前的写法无法生效是因为 div 的背景图层级高于背景色，直接设置 hover:bg-black 会被背景图遮挡，看不到黑色层的效果。

最优修改方案（无需调整HTML结构） #

直接修改外层 div 的 className 即可，调整后的代码如下：

<div className="h-80 my-4 w-64 rounded-md p-4 bg-video bg-cover bg-center bg-black bg-opacity-0 bg-blend-multiply shadow-lg cursor-pointer group hover:bg-opacity-60 transition-all duration-1000">
  <h1 className="uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500">
    video
  </h1>
</div>

新增属性说明： #

• bg-black：给容器设置默认黑色背景色
• bg-opacity-0：默认状态下黑色背景完全透明，仅显示背景图
• bg-blend-multiply：开启正片叠底的背景混合模式，让背景色和背景图自然混合，实现背景色透明度越高、图片越暗的效果
• 把原有的 hover:bg-black 替换为 hover:bg-opacity-60：悬停时将黑色背景透明度调整为60%，你可以自行调整0-100之间的数值，数值越大变暗效果越强

配置说明 #

你当前的 tailwind.config.js 无需做任何修改，已经配置的内容和本次要实现的变暗效果没有冲突，直接保留即可。

备选方案（不使用背景混合模式） #

如果担心背景混合模式的兼容性，可以新增遮罩层实现，调整后的代码如下：

<div className="relative h-80 my-4 w-64 rounded-md shadow-lg cursor-pointer group">
  <!-- 背景图容器 -->
  <div className="absolute inset-0 bg-video bg-cover bg-center rounded-md"></div>
  <!-- 变暗遮罩层 -->
  <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-60 transition-all duration-1000 rounded-md"></div>
  <!-- 内容区域 加z-index避免被遮罩覆盖 -->
  <div className="relative z-10 p-4">
    <h1 className="uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500">
      video
    </h1>
  </div>
</div>

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