具有背景图片和不透明度的CSS悬停

Question

我有一个div，当用户将鼠标悬停在div上时，我想要一个具有不透明度的背景和这样的背景图片：

.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中的图片和内容。 我该怎么做才能解决此问题？

Answer 1

尝试这个：

.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