如何在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背景图像，该图像填充了overlay
div，这样我们就可以避免IE的不透明度问题，该问题也将不透明度应用于子元素。