css - 在 CSS 中，如何将背景悬停在图像上

Question

我有一个简单的 <img>页面上的图像，我想在将鼠标悬停在图像顶部时显示深色背景。听起来微不足道的事情似乎更难归档。

这是我当前的代码。甚至设置 z-index 的问题位置，背景总是放在src后面图像。

<style>
  img:hover { 
    background: black;
    z-index: 999;
  }
</style>

<img src="image.jpg" />

知道如何存档吗？

Answer 1

您可以在图像的 wrapper 上设置黑色背景，并使图像在悬停时具有 opacity: 0。

demo

HTML:

<div class='wrapper'><img src='image.jpg'></div>

相关CSS:

.wrapper { background: black; }
.wrapper img:hover { opacity: 0; }