Question

HTML CODE：

<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="bot-col">
    <div style="display: flex;margin: 0 auto;">
        <div>
            <h2>Gift Vouchers</h2>
            <p>
              For The Honour - Edinburgh, or any of Martin's other...
              <a href="gift-vouchers.html">—Purchase here</a>
            </p>
        </div>
        ...
    </div>
</div>

CSS

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

查看我的DEMO

我显示两个输出。

使用滤镜和不透明度控制图像JPG。
使用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) 
    }

RGBA不起作用

2 个答案: