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悬停与背景图像和不透明度

回答

相关问题