web前端入门到实战：镂空遮盖层效果的研究

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

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

视觉

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

DIV拼接

最原始的方法，围着镂空区域拼接4个div，拼接的方式很多，比如上面的图中用了不同颜色来表示4个div。

<div class="box">
  <div class="text"></div>
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
</div>

<style>
.item-1, .item-2, .item-3,