RGBA不起作用

Question

HTML代码：

<div class="item">
<img src="images/img.jpg">
<p>Hello</p>
</div>

CSS代码：

.item img:hover {
        background: rgba(0, 0, 0, 0.8) 
    }

当我将图像悬停时，没有任何反应。 当有人悬停时，我试图给图像加一些暗度。

有什么建议么？

谢谢。

Answer 1

您的RGBA当然不会起作用，因为当您将鼠标悬停在图像上时，唯一的效果就是图像后面的背景。 除非您使用的是透明图像，否则它将起作用！

HTML

<div class="item">
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg">
<p>Hello</p>
</div>

<br>

<!-----This section To let you know For PNG hover ---> 

<div class="image">Before</div>
<div class="image">
  <div class="color">
    After
  </div>
</div>

CSS

.item img{
  height:100px;
    border-radius: 10%;
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    transition: transform 0.5s, -webkit-filter 0.5s,-moz-filter 0.5s,-ms-filter 0.5s,filter 0.5s;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray; /* IE 6-9 */
}

.item img:hover {
  -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    -webkit-filter: none;
    filter: none; /* IE 6-9 */
    }

 /*-----This section To let you know For PNG hover ---*/   

    .image {
  background:url(http://nsood.in/logo256.png);
  width:256px;
  height:256px;
  display:inline-block;
}
.color:hover {
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.7);
  color:#fff;
}

查看我的演示

我显示两个输出。

1. 使用滤镜和不透明度控制图像JPG。
2. 使用RGBA使用png文件。

Answer 2

背景位于图像的后面 ，因此您看不到它。 您必须使用包含<img>标签且大小相同的背景创建花药层，然后在悬停时将该背景附加到该新层。

<div class="item">
  <div class="layer">
    <img src="images/img.jpg">
  </div>
  <p>Hello</p>
</div>


.layer:hover {
        background: rgba(0, 0, 0, 0.8) 
    }