通常实现遮罩层是使用两个元素
<div class="wrap"> //遮罩层
<div class="con"> //主内容层
</div>
</div>
.wrap{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.8);
}
配合固定定位或者页面没有滚动时,可以是用box-shadow方案来消除额外的HTML元素
<div class="con"> //主内容层
</div>
.con{
position: fixed;
box-shadow: 0 0 0 9999px rgba(0,0,0,.8); // 给一个巨大的扩张半径,让阴影来实现遮罩
}
box-shadow方案的缺陷在于无法防止鼠标与页面发生交互,只能在视觉上起到遮罩的作用