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

Question

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

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

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

<img src="image.jpg" />

知道如何存档吗？

score 3 · Accepted Answer

您可以在图像的包装上设置黑色背景并使图像opacity: 0悬停。

演示

HTML：

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

相关CSS：

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

score 1 · Accepted Answer

我不确定你要做什么，但如果你想用黑色方块覆盖图像，那么你必须在它上面使用其他对象，因为背景永远不会停止成为 BACKground。