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

Question

我是 tailwind 的新手，我想在悬停时使图像变暗。这是我的 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.tailwindcss.com/hfCerQQvHQ

Answer 2

您可以通过多种选择来完成您想要的事情。使用：

过滤器
背景过滤器。

我正在与您分享过滤器示例。

<div class="min-h-screen flex items-center justify-center bg-royalblue">
  <div class="filter hover:grayscale hover:contrast-200">
    <img src="https://loremflickr.com/cache/resized/65535_51423949778_4bccb1beec_c_500_500_nofilter.jpg" alt="">
  </div>
</div>

https://codepen.io/victoryoalli/pen/mdBVjbb

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

how to darken the image on hover in tailwind

hover

background-image

tailwind-css