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. 使用png文件使用RGBA。

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) 
    }