基本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-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);
}