使用：后CSS生成全屏面具

Question

这是我尝试一下：JSFIDDLE

因为我重写现有的一些风格，我需要补充的背后我box

.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; 
} 

半透明面具

看到小提琴中的样品，我不明白为什么盒子也覆盖了它的: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/。