如何在顺风中悬停时使图像变暗

Question

我是顺风新手，我正在尝试使悬停时图像变暗。这是我的 config.js

theme: {
extend:{
backgroundImage: (theme) => ({
        video: "url('./bg-img.jpg')",
})
}
},

variants: {
boxShadow:["responsive", "hover", "focus"]
}

这是我的代码：

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

Answer 1

您可以尝试将 div 放入其中，然后在悬停它时使用背景不透明度。

你的 HTML 将会是这样的

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

和 Tailwind 配置文件

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        video: "url('./bg-img.jpg')",      },
    },
  },
  variants: {
    extend: {
      backgroundImage: ['hover'],
    }
  },
}

您可以在这里查看演示：https://play.tai​​lwindcss.com/hfCerQQvHQ