我想创建一个任意大小的 div,然后在该 div 上方显示某些内容。在 css 中如何最好地定位和调整叠加层的大小,使其与下方的 div 完全一致?
您可以使用 position:absolute
将叠加层定位在您的div内,然后像下面这样向所有方向伸展:
CSS 更新 *
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.85);
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
z-index:9999;
color:white;
}
您只需要确保父 div
添加了 position:relative
属性并且具有较低的 z-index
即可。
为下面的评论者制作了一个演示,可在包括 IE7+ 在内的所有浏览器中正常工作。
从 css 中删除了 opacity
属性,而是使用 rGBA 颜色赋予背景颜色以及透明度水平。这样,叠加层所携带的内容就不会受到影响。由于 IE 不支持 rGBA,我使用了 IE hack 代替它来提供填充叠加层 div 的 base64 编码 PNG 背景图像。通过这种方式,我们可以避免 IE 应用透明度问题,即将透明度应用于子元素。
虽然我来晚了,但如果你想使用纯 CSS 对任意元素进行此操作,而不必涉及定位、叠加 div 等等,你可以使用一个内嵌的盒子阴影:
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
这将适用于任何小于4000像素长或宽的元素。
CSS:
#box{
border:1px solid black;
position:relative;
}
#overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:rgba(255,255,0,0.5);
}
.box {
background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
width: 300px;
height: 200px;
}
.box:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
<div class="box"></div>
<div id="container">
<div id="on-top">Top!</div>
<div id="on-bottom">Bottom!</div>
</div>
和CSS
#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}
如果没有看到您当前的HTML和CSS示例,快速答案是使用z-index
CSS:
#div1 {
position: relative;
z-index: 1;
}
#div2 {
position: relative;
z-index: 2;
}
/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }
/* overlay */
.foo::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo > * { z-index: 1; }
我刚在codepen上试玩了一个类似的问题,这是我使用简单的CSS标记创建叠加层的方法。我创建了一个带有.class. box的div元素。在该div中,我创建了两个div,一个应用了.inner class,另一个应用了.notext class。.box div中这两个class都最初设置为display:none,但当.hovered over .box时,它们变得可见。
.box{
height:450px;
width:450px;
border:1px solid black;
margin-top:50px;
display:inline-block;
margin-left:50px;
transition: width 2s, height 2s;
position:relative;
text-align: center;
background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');
background-size:cover;
background-position:center;
}
.box:hover{
width:490px;
height:490px;
}
.inner{
border:1px solid red;
position:relative;
width:100%;
height:100%;
top:0px;
left:0px;
display:none;
color:white;
font-size:xx-large;
z-index:10;
}
.box:hover > .inner{
display:inline-block;
}
.notext{
height:30px;
width:30px;
border:1px solid blue;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
}
.box:hover > .notext{
background-color:black;
opacity:0.5;
display:inline-block;
}
<div class="box">
<div class="inner">
<p>Panda!</p>
</div>
<div class="notext"></div>
</div>
div{
background-image:url('');
background-size:cover;
background-position:top center;
position:relative;
}
div:before{
content:'';
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:rgba(0,0,0,0.7);
}