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

我努力在浏览器(Chrome)中正确渲染这个渲染。 我有一个包装HTML的所有元素的包装,我想有一个DIV(让我们称之为div-1)拥有一个图像,并有一个覆盖div顶部的左边,就像我在这个草图图片…任何快速解决scheme?

与重叠半透明div的div bg

这里是一个纯粹的CSS解决scheme,类似于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,但是如果你喜欢,当然你也可以使用其他的透明方法。

使用CSS3,您不需要使用透明度来制作自己的图像。

只要有以下的一个div

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

背景(.5)中的最后一个参数是透明度级别(较高的数字更不透明)。

示例小提琴

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

就像之前的答案一样,但是我之前把::放在堆栈的目的之外。 如果你想在叠加层上包含文本(一个常见的用例),使用:: 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-Element,您可以通过类设置不透明度以启用或禁用该效果。

 .mute-all { opacity: 0.4; }