html - 使用 :after CSS to generate full-screen mask

Question

这是我的尝试:JSFIDDLE

因为我要覆盖一些现有样式，所以我需要在我的 box 后面添加一个半透明 mask

.box {
position:fixed;
background:red;
height:50%;
width:200px;
top:0;
left:0;
bottom:0;
right:0;
z-index:1000;
margin:auto;
}

.box:after {
content:"";
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(255,255,255,0.8);
z-index:999;
}

看到fiddle中的示例，我不明白为什么盒子也被它的:after风格覆盖了？

感谢您的关注!

Answer 1

因为 :after 伪元素定义了一个伪内容，该内容在 .box 的真实内容 .它是 .box 的伪子。所以如果你的伪元素真的在 DOM 中定义，它看起来像

<div class="box">
    <p>some real content</p>
    <div class="box-after"></div>
</div>

不是这样的:

<div class="box">
    <p>some real content</p>
</div>
<div class="box-after"></div>

编辑:
要解决这个问题，您可以简单地将 .box 的所有内部内容用另一个 div 包裹起来。

<div class="box">
    <div class="inner-box">inner content</div>
</div>

然后对 CSS 做一些小改动，你会得到这个:http://jsfiddle.net/GA7GC/2/ .