镂空覆盖层效果研究

上图是“QQ截图”中选中区域时的画面。可以看到除了中间框选中的部分，其他区域都被半透明层（背景）覆盖。这种作用不知专业名称，这里称之为“中空覆盖层”。实际业务需求中很少见。比较常见的有“页面新手引导”、“视频网站熄灯模式”等，就用到了这种效果。一般简单的方法就是设置content元素的z-index大于overlay的，使得元素显示在overlay之上。接下来分享其他方法，可能对一些特殊场景有用。下面介绍的方法是：多个DIV拼接，单个DIV是通过CSS属性border、outline、box-shadow和mix-blend-mode实现的。下面分别从角度和动作上进行讲解。VisualFirst，使用styles给内容罩上一层半透明的罩子，并镂空一定区域。最原始的DIV拼接方法是在镂空区域周围拼接4个div。拼接的方式有很多种。比如上图中，用不同的颜色来表示4个div。