如何在 css 中创建叠加层？

Question

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

原文由 Pieter Bos 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

演示

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

原文由 Andres Ilich 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我来晚了，但是如果你想只使用 CSS 对任意元素执行此操作，而不想弄乱定位、覆盖 div 等，你可以使用插入框阴影：

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

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

示例：http: //jsfiddle.net/jTwPc/

原文由 user1002973 发布，翻译遵循 CC BY-SA 3.0 许可协议