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

【问题标题】：CSS Hover with background image and opacityCSS 悬停与背景图像和不透明度
【发布时间】：2014-03-25 15:28:24
【问题描述】：

我有一个 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 内的图像和内容后面。我能做些什么来解决这个问题？

【问题讨论】：

这就是背景的预期目的，在事物的背景中。您是否正在尝试创建一个覆盖内容的模式？
div里的每个元素后面都有背景是正常的吗？！
使用 a 标签，而不是 div。

标签： html css

【解决方案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

【讨论】：