Question

我的目标是拥有一个具有任何背景的div，然后使用伪元素创建透明的白色叠加层，从而“淡化”div的背景。但是，“叠加”必须在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不应位于白色叠加层“下方”，即.container::before。

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

结束目标：文本和蓝色不应覆盖红色。

JS小提琴：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元素。这样做时，所有元素都不需要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);
}

使用伪元素创建背景叠加

1 个答案: