这是我的尝试: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
风格覆盖了?
感谢您的关注!
最佳答案
因为 :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/ .
关于html - 使用 :after CSS to generate full-screen mask,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19376018/