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

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

Answer 1

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

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

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

Answer 5

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

 .mute-all { opacity: 0.4; }