html - 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;
}

查看我的 DEMO

我展示了两个输出。

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