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

Question

我很难在我的浏览器（Chrome）中进行渲染。我有一个包含HTML的所有元素的包装器，我希望有一个DIV（让我们称之为div-1）来保存图像，并且在它的左上方有一个叠加div，就像我在这里勾画的那样图片...任何快速的解决方案？

Answer 1

这是一个纯粹的CSS解决方案，类似于DarkBee的答案，但不需要额外的.wrapper 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，但当然你可以使用其他透明方法。

Answer 2

使用CSS3，您无需使用透明度制作自己的图像。

只需拥有以下

的div

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

背景中的最后一个参数（.5）是透明度（更高的数字更不透明）。

Example Fiddle

Answer 3

.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>

Answer 4

对于div-Element，你可以通过类设置不透明度来启用或禁用效果。

.mute-all {
   opacity: 0.4;
}

Answer 5

就像之前的答案一样，但我之前只是为了堆叠目的而放置::。如果你想在叠加层上包含文本（一个常见的用例），使用:: 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);
}