我正在製作一個網站，其中有一個圖像，當它徘徊時，它有一個顏色疊加。但不是重疊的顏色，它變成白色，網站的背景。圖像懸停顏色疊加
下面是代碼：
<div class="col-md-6 col-sm-12">
<img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2">
</div>
和CSS：
.overlay:hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.23);
}
我很抱歉，我不能嵌入圖像I」不允許。
opacity: 0;使其完全透明（即不可見） - 因此您會看到網站的白色背景。剛剛從hover狀態（不是從最初的CSS）中刪除該狀態
當前您正在隱藏圖像本身opacity: 0。你想要的是在圖像上疊加一個僞元素，像這樣：
.overlay {
position: relative;
display: inline-block;
background: cyan;
display: inline-block;
}
.overlay > img {
vertical-align: middle;
}
.overlay::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: .5s ease;
}
.overlay:hover::before {
opacity: 0.23;
}<div class="col-md-6 col-sm-12">
<span class="overlay">
<img src="http://via.placeholder.com/350x150" class="img-responsive" alt="about img 2">
</span>
</div>僅改變圖像的背景顏色時，圖像是可見的將無法正常工作。所以要有一個真正的覆蓋圖，我們需要實際創建一個覆蓋該圖像頂部的元素。
試試這個，
.container {
position: relative;
width: 50%;
}
.img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #fff;
}
.container:hover .overlay {
opacity: 0.7;
}<div class="container">
<img src="http://via.placeholder.com/350x150" alt="about img 2" class="img">
<div class="overlay">
</div>
</div>您可以更改根據你的項目，你有多少模糊想要的「不透明度」。 這是您的示例的工作副本。你可以看到文字懸停效果（約IMG2）
.overlay:hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.2;
transition: .5s ease;
background-color: rgba(0,0,0,0.23);
}<div class="col-md-6 col-sm-12">
<img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2">
</div>
'不透明度：0'很可能是完全淡出它（和它很難知道頂部/底部/ etc屬性將不會看到完整的CSS）。由於您的顏色使用的是alpha，因此請嘗試將不透明度設置爲1或者不設置它 – ne1410s
Hello！感謝您的回覆，我將它更改爲1並將其刪除。但它沒有工作，覆蓋沒有工作了:( –
@ ne1410s是正確的。消除不透明度修復它https://jsfiddle.net/sbb2eksq/ – Gezzasa