在CSS中，如何将图像悬停在图像上

Question

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

这是我现在的代码。问题在于，即使设置了z-index的位置，背景也始终放在src图片的后面。

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

<img src="image.jpg" /> 

任何想法如何将其归档？

Answer 1

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

demo

HTML：

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

相关CSS：

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

Answer 2

我不确定你想要做什么，但是如果你想用黑色正方形覆盖图像，那么你必须在其上使用其他物体，因为背景永远不会停止背景。