CSS悬停与背景图像和不透明度

I have a div, and when the user hovers on the div, I want a background with opacity and a background image like so:

我有一个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;
}

but the background image in my hover is going behind images and content inside the div. What can I do to fix this?

但是我的悬停中的背景图像是在div内部的图像和内容之后。我该怎么做才能解决这个问题?

1 个解决方案

#1

Try this:

.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