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

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

1 个答案: