將圖像懸停在其前面

Question

我只是在基本背景上懸停，圖像在前面。

我希望我的背景可以通過黑暗的方式懸停，但我不想在它前面的圖像也受到影響。所以我想懸停背景，但同時它的前面的圖像仍然是一樣的。

HTML：

<div class="mydiv"> 
<img class="img" src="Assets/Sources/badge1.png" width="60%" height="60%" > 
</div> 
<div class="overlay"></div> 

CSS

.mydiv { 
    float:left; 
    width:49%; 
    height:400px; 
    margin-right: 1%; 
    background-image: url(Sources/bg1.jpg); 
    background-color:black; 
    background-size: cover; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    position:relative; 
} 


.mydiv:hover > .overlay { 
    width:100%; 
    height:100%; 
    position:relative; 
    background-color:#000; 
    opacity:0.5; 
} 

Answer 1

您可以通過使用.mydiv這樣的僞元素解決這個問題，你不需要.overlay元素都：

.mydiv > img { 
    position: relative; 
} 
.mydiv:hover::before { 
    content: ""; 
    position:absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    opacity:0.5; 
}