使用：後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/。