在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

我不確定你想要做什麼，但是如果你想用黑色正方形覆蓋圖像，那麼你必須在其上使用其他物體，因爲背景永遠不會停止背景。