您可以使用
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 transparent9; z-index:9999; color:white;}您只需要确保您的父div为其
position:relative添加了属性，并为其设置了更低的属性
z-index。
为下面的评论者制作了一个可以在所有浏览器（包括IE7 +）上运行的演示。
opacity从CSS中移除了该属性，而是使用rGBA颜色为背景（仅背景）提供了不透明度级别。这样，覆盖层承载的内容将不会受到影响。由于IE不支持rGBA，因此我改用IE
hack来给它提供一个base64编码的PNG背景图像，该图像填充了overlay
div，这样我们就可以避免IE的不透明度问题，该问题也将不透明度应用于子元素。
