CSS懸停與背景圖像和不透明度

我有一個div，當用戶將鼠標懸停在DIV上，我想不透明背景和背景圖像像這樣：CSS懸停與背景圖像和不透明度

.ml-thank-you-box-item:hover{ 
    opacity:0.5; 
    background-color:#9b9b9b; 
    background-image:url(box_item_hover_img.png); 
    background-repeat:no-repeat; 
    background-position:center; 
}

但在背景圖片我懸停在div內的圖像和內容之後。我能做些什麼來解決這個問題？

來源

2014-03-25 user1269625

這是一個背景的預期目的，是在事物的背景。您是否嘗試創建覆蓋內容的模式？ –

背景中的每個元素背後都是正常的？！ – Johnny000

使用一個標籤，而不是一個div。 –

試試這個：

.ml-thank-you-box-item{position:relative} 
.ml-thank-you-box-item:before{ 
content:''; 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
z-index:100; 
display:none; 
background:#9b9b9b url(box_item_hover_img.png) no-repeat center; 
opacity:0.5; 
} 
.ml-thank-you-box-item:hover:before{display:block}

DEMO

來源

2014-03-25 15:43:05 Anon

CSS懸停與背景圖像和不透明度

回答

相關問題