基本CSS-如何在顶部覆盖半透明DIV的DIV

我正在努力在浏览器（Chrome）中正确渲染。我有一个包含HTML所有元素的包装器，我想有一个DIV（我们称之为DIV-1）来保存一个图像，在它的左边有一个覆盖DIV，就像我在这张图中画的那样……有什么快速的解决方案吗

.foo {
   position : relative;
}
.foo .wrapper {
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;
}

<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>

.foo{
位置：相对位置；
}
.foo.wrapper{
背景图片：url（'semi-trans.png'）；
z指数：10；
位置：绝对位置；
排名：0；
左：0；
}

使用CSS3，您不需要制作自己的透明图像

只要和下面的人跳个舞就行了

position:absolute;
left:0;
background: rgba(255,255,255,.5);

背景（.5）中的最后一个参数是透明度级别（数值越大，透明度越高）

---

这是一个纯CSS解决方案，类似于DarkBee的答案，但不需要额外的

。包装器
div:

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

我在这里使用rgba，但是如果你喜欢，当然可以使用其他透明度方法。
就像前面的答案一样，但是我会在前面加上：：，只是为了叠加。如果您想在覆盖上包含文本（一个常见的用例），使用：：before应该可以解决这个问题

.dimmed {
  position: relative;
}

.dimmed:before {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

对于div元素，您可以通过类设置不透明度以启用或禁用效果

.mute-all {
   opacity: 0.4;
}

可能要添加
top:0；左：0到
.wrapper
这是真的。如果图像不是透明的，
opacity:0.4；过滤器：alpha（不透明度=40）；/*对于IE8和早期版本*/
PS-使用rgba是不可取的，我看到您使用了透明png…这是由于internet explorer，对吗？是的，支持无法处理的旧浏览器CSS3@marcvangend解决方案可行，但如果有一个可滚动的div而不是图像，我们仍然可以允许滚动工作吗？@Onkar您可以尝试添加
指针事件：无至
。暗显：在
选择器之后。另见。请让我们知道它是否在这个特定的用例中工作。如果要单击底层元素，请添加规则指针事件：无；添加到css规则后的元素