我的目标是创建一个具有任何背景的div，然后使用伪元素创建一个透明的白色覆盖，从而“照亮”div的背景。不过，“覆盖”必须位于div的内容之下。因此，在以下示例中：
<；div class=“container”>；
<；div class=“content”>；
<；h1>；你好，世界</h1>；
</部门>；
</部门>；
.集装箱{
背景色：红色；
宽度：500px；
高度：500px；
位置：相对位置；
}
.内容{
背景颜色：蓝色；
宽度：250px；
}
.容器：：之前{
内容：“；
显示：块；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
z指数：1；
背景色：rgba（255、255、255、.8）；
}
.contentdiv不应位于白色覆盖层（即.container:：before之前）的“下方”
我不希望在.content上使用z-index，但如果这是唯一的解决方案，我可以
最终目标：红色应该被覆盖，而文本和蓝色不被覆盖
JS小提琴：http://jsfiddle.net/1c5j9n4x/
如果伪元素具有z-index，则需要定位.content元素并添加z-index值以建立堆叠上下文
更新的示例
.content{
背景颜色：蓝色；
宽度：250px；
位置：相对位置；
z指数：1；
}
…您还可以从伪元素中删除z-index，然后只定位.content元素。这样做时，所有元素都不需要z-index。之所以这样做，是因为：before伪元素本质上是一个先前的同级元素。因此，后面的.content元素位于顶部
备选示例
.content{
背景颜色：蓝色；
宽度：250px；
位置：相对位置；
}
.容器：：之前{
内容：“；
显示：块；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：rgba（255、255、255、.8）；
}