css设置position: fixed导致遮罩层无法在最上面_web前端入门到实战：镂空遮盖层效果的研究...

上图是“QQ截图”选择区域时的画面，可以看到除了中间框选的部分，其他区域被一层半透明层覆盖（backdrop），这种效果不知道专业叫法，这里称呼它“镂空遮盖层”。实际业务需求中倒是不多见，比较常见的是“页面上的新手引导”，“视频网站的关灯模式”等用到这种效果，通用简单的做法是将内容元素的z-index设置大于遮盖层的，使该元素显示在遮盖层上面。接下来分享下其他的方法，可能对某些特殊场景有用。

以下介绍的方法有：通过多个DIV拼接，单个DIV利用CSS的属性border, outline, box-shadow和混合模式mix-blend-mode来实现，下面分别从视觉和动作来说明。

视觉

首先，先用样式实现内容上覆盖一层半透明遮盖，其中某个区域镂空。