基本CSS - 如何在顶部覆盖一个带有半透明DIV的DIV [英] Basic CSS - how to overlay a DIV with semi-transparent DIV on top
本文介绍了基本CSS - 如何在顶部覆盖一个带有半透明DIV的DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在尝试在浏览器(Chrome)中进行此渲染。我有一个包装HTML的所有元素的包装,我想有一个DIV(让我们称之为div-1)持有一个图像,并在它的左上方有一个重叠的div,就像我在草图图片...任何快速解决方案?
I'm struggling to make this render right in my browser (Chrome). I have a wrapper holding all the elements of the HTML, and I want to have a DIV (lets call it div-1) that hold a image, and has a overlay div on top of it to the left, like I sketched in this picture...any quick solutions?
推荐答案
这里是一个纯CSS解决方案,类似于DarkBee的答案,但不需要额外的 .wrapper
div:
Here's a pure CSS solution, similar to DarkBee's answer, but without the need for an extra .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,当然你可以使用其他透明方法如果你喜欢。
I'm using rgba here, but of course you can use other transparency methods if you like.
这篇关于基本CSS - 如何在顶部覆盖一个带有半透明DIV的DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文