如何在顺风 css 中使用悬停更改图像顶部的颜色答案

【问题标题】：How to change the color on top an image using hover in tailwind css如何在顺风 css 中使用悬停更改图像顶部的颜色
【发布时间】：2022-01-28 09:07:17
【问题描述】：

我不明白如何在图像上放置颜色过渡效果，例如当我将鼠标悬停在图像上时更改图像顶部的颜色。基本上我想在我的图像上产生悬停效果，让我们说蓝色。我试着在谷歌上搜索这个，但我找不到我的问题的任何答案。我是顺风的新手，但我确实尝试过 hover:bg-blue-400 但它不起作用，我目前使用的是顺风的第 3 版。这是一个例子

<div class="flex flex-col items-center rounded-2xl p-6">
      <img src="./images/myImage.jpg" alt="image" class="hover:bg-blue-400">
</div>

【问题讨论】：

终于明白了，不好意思问这个问题

标签： css tailwind-css

【解决方案1】：

答案是用您选择的颜色制作一个 div，然后在那个地方其中的 img 标签可以说 hover:opacity-25 然后你的好。就这样……

<div class="bg-blue-400 rounded-xl">
  <img src="./image.jpg" alt="image" class="hover:opacity-25 rounded-xl">
</div>

【讨论】：