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

Question

我正在努力在我的浏览器（Chrome）中进行此渲染。我有一个包含 HTML 的所有元素的包装器，我想要一个包含图像的 DIV（我们称之为 div-1），并且在它的左侧有一个覆盖 div，就像我在这个图片...任何快速的解决方案？

Answer 1

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

.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) 是透明度级别（数字越大越不透明）。

示例小提琴

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 元素，您可以通过一个类设置不透明度来启用或禁用效果。

.mute-all {
   opacity: 0.4;
}

Answer 5

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