通常实现遮罩层是使用两个元素

<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方案的缺陷在于无法防止鼠标与页面发生交互，只能在视觉上起到遮罩的作用