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

75

我正在努力在我的浏览器（Chrome）中进行渲染。我有一个包装器，其中包含HTML的所有元素，并且我想有一个DIV（将其称为div-1）来保存图像，并在其顶部的左上角有一个div覆盖层，就像我在其中绘制的那样图片...任何快速解决方案？

带有重叠半透明div的div bg

css html

— TM23
source

153

这是一个纯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，但是如果愿意，您当然可以使用其他透明度方法。

— 马克万根
source

@marcvangend解决方案有效，但如果有可滚动的div而不是图像，我们是否仍可以允许滚动工作？

— 2014年

2

@Onkar您可以尝试将其添加pointer-events: none;到.dimmed:after选择器。另请参见stackoverflow.com/questions/1009753/…。请让我们知道它是否适用于此特定用例。

— marcvangend 2014年

4

太棒了如果要单击到达基础元素，请添加规则指针事件：none; 后元素css规则的使用

— Adam Diament

25

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

只是有一个div与以下

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

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

小提琴的例子

— 特威肯汉姆
source

16

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

— 黑蜂
source

1

可能要添加top:0; left: 0;到.wrapper

— Collin Henderson

确实如此。更改了

— DarkBee

1

另外，如果图像还不是透明的，opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */

— echolocation

1

PS-不建议使用rgba，我看到您使用了透明png ...这是由于Internet Explorer造成的，对吧？

— TM23 2013年

是的，要支持不能处理CSS3的旧版浏览器

— DarkBee 2013年

10

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

.mute-all {
   opacity: 0.4;
}

— 安德烈亚斯·克罗恩（Andreas Krohn）
source

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

— 张百祥
source