html - 如何在 css 中创建叠加层？

Question

我想创建一个任意大小的 div，然后在该 div 之上显示一些内容。完全按照 css 下面的 div 定位和调整叠加层大小的最佳方法是什么？

Answer 1

您可以使用 position:absolute 在您的 div 中放置一个叠加层，然后像这样向各个方向拉伸(stretch)它:

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+)的演示。

Demo

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