如何在css中创建叠加层？

Question

我想创建一个任意大小的div,然后在该div上面显示一些东西.在css中完全按照下面的div来定位和调整叠加层的最佳方法是什么？

Answer 1

您可以使用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 +.

演示

opacity从css中删除了属性,而是使用rGBA颜色来提供背景,而只使用背景,不透明度级别.这样,叠加所承载的内容不会受到影响.由于IE不支持rGBA,我使用IE hack而不是给它一个base64编码的PNG背景图像来填充叠加div,这样我们可以避开IE不透明度问题,它也将不透明度应用于子元素.

Answer 2

http://jsfiddle.net/55LNG/1/

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);
}

Answer 3

我迟到了派对,但是如果你想用一个任意的元素来做这个,只使用CSS,没有搞乱定位,叠加div等,你可以使用一个插入框阴影:

box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);

这适用于任何小于4000像素长或宽的元素.

例如:http://jsfiddle.net/jTwPc/