基本的 CSS-如何覆盖一个半透明 DIV 的顶部

我正在努力使这个渲染正确在我的浏览器(Chrome)。我有一个包装器，包含 HTML 的所有元素，我想有一个 DIV (让我们称之为 DIV-1) ，包含一个图像，并有一个覆盖 DIV 在它的左上方，就像我在这张图片草图... 有什么快速的解决方案吗？

div bg with overlay semi transparent div

172965 次浏览
小开 
.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>
小开

使用 CSS3你不需要制作自己的透明图像。

只要有一个如下图所示的 div

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

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

例子小提琴

小开

这里有一个纯 CSS 解决方案，类似于黑蜂的答案，但不需要额外的 .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，当然，如果您愿意，也可以使用其他透明方法。

小开

和前面的答案一样，但我会加上: : 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);
}
小开

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

.mute-all {
opacity: 0.4;
}

提交答案