悬停图像时除了不透明度之外我还能使用啥？

Posted 2023-03-05

【中文标题】悬停图像时除了不透明度之外我还能使用啥？

【英文标题】：what can I use except opacity while hovering an image?悬停图像时除了不透明度之外我还能使用什么？

【发布时间】：2021-09-10 11:47:41

【问题描述】：

我正在尝试在图像上创建悬停效果。当我悬停时，图像上应该会出现一点黑暗。 为此，我尝试使用 opacity 属性，它可以工作，但感觉不太好或令人印象深刻。相反，它提供了我不想要的轻盈。如果您想知道在图像悬停时我想要什么样的黑暗，像这样，rgba(0,0,0,0.2)。但是如何使用呢？

如果我可以使用它，我也玩过伪元素，但无能为力。我知道这不会像这样工作，但我现在什至无法解释。请帮帮我。

.box::before 
 content: '';
width:100%; 
height: 100%;
background: rgba(0,0,0,0,2);

以下是不透明的代码，但正如我所说的那样，我试图得到一点黑暗。

.box 
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 10px;
   background:url(https://r1.ilikewallpaper.net/ipad-air-wallpapers/download/4427/Green-Nature-iPad-4-wallpaper-ilikewallpaper_com_200.jpg);


.box:hover 
  opacity:0.8;
  /*rgba(0,0,0,0.2) This is needed*/

<div class="box">
</div>

【参考方案1】：

在hover 上使用伪元素，然后根据需要设置background

.box 
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 10px;
  background:url(https://r1.ilikewallpaper.net/ipad-air-wallpapers/download/4427/Green-Nature-iPad-4-wallpaper-ilikewallpaper_com_200.jpg);
  position:relative;


.box:hover:before
 
   content:'';      
   width:100%;
   height:100%;
   position:absolute;
   background:rgba(0,0,0,0.2);

<div class="box">
</div>

【参考方案2】：

您可以在 CSS 中使用滤镜灰度。

类似这样的：

img 
  filter: grayscale(0%);

img:hover 
  filter: grayscale(20%);

在这里了解更多信息：https://www.w3schools.com/cs-s-ref/css3_pr_filter.asp

【讨论】：

这也是一个不错的选择。谢谢@AD-1。

欢迎您！附言如果你觉得这有帮助，你能支持我的回答吗？我正在努力达到 500 名声望 ;)

【参考方案3】：

您可以使用此方法来实现您正在寻找的东西。您还可以添加过渡效果，以使其不那么突然。

.box 
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 10px;
   background:url(https://r1.ilikewallpaper.net/ipad-air-wallpapers/download/4427/Green-Nature-iPad-4-wallpaper-ilikewallpaper_com_200.jpg);


.box:hover 
  -webkit-filter: brightness(80%);

<div class="box">
</div>

【讨论】：

这看起来很方便！谢谢