使用伪元素创建背景叠加

Question

我的目标是 div 具有任何背景，然后使用伪元素创建透明的白色覆盖层，因此 "lightening" div 的背景。但是，"overlay" 必须在 div 的内容之下。所以，在下面的例子中：

<div class="container">
    <div class="content">
        <h1>Hello, World</h1>
    </div>
</div>

.container {
    background-color: red;
    width: 500px;
    height: 500px;
    position: relative;
}
.content {
    background-color: blue;
    width: 250px;
}
.container::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, .8);
}

.content div 不应该是 "underneath" 白色覆盖层，又名 .container::before。

我宁愿不必在 .content 上使用 z-index，但如果这是唯一的解决方案，我可以。

最终目标：红色应该被覆盖，而文本和蓝色则没有。

JS fiddle: http://jsfiddle.net/1c5j9n4x/

Answer 1

如果伪元素有一个 z-index，那么你需要定位 .content 元素并将 z-index 值添加到 establish a stacking context.

Updated Example

.content {
    background-color: blue;
    width: 250px;
    position: relative;
    z-index: 1;
}

..你可以也从伪元素中删除 z-index，然后仅定位 .content 元素。这样做时，none 个元素需要 z-index。之所以可行，是因为 :before 伪元素本质上是前一个同级元素。因此，随后的 .content 元素位于顶部。

Alternative Example

.content {
    background-color: blue;
    width: 250px;
    position: relative;
}
.container::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, .8);
}

使用伪元素创建背景叠加

Use Pseudo Element to Create Background Overlay

html

css

pseudo-element