背景
前段时间画页面有一个小需求，就是点击「分享」按钮，页面出现一个半透明的蒙层，然后突出显示一个图片，引导用户进行操作。
分析
这个需求很常见，其实也很简单。但是以前没想过如何实现，现在突然要做这个，脑袋里一点思路都没有。现在审视一下，造成这个情况的原因有两个：一是代码写的少了，二是没有多拓展学习并进行思考。为了改变这种情况，需要在日常中加强对事情的拆解分析。
蒙层的使用，其实就是展示两个元素，这两个元素视觉上覆盖在页面其他元素上。我将这两个元素称为「蒙层元素」和「突出元素」。只需要将「蒙层元素」的宽高覆盖整个页面，并且让其z-index高于页面其他元素，背景颜色设为灰色。然后把「突出元素」z-index值设高于「蒙层元素」即可。这个思路最直接，也是最简单。但应该会有其他不合适的地方，搜索了一下掘金，发现一篇文章总结了6种实现蒙层的方法。以后有需要时进行研读。
代码实现
.shadow {
position: absolute;
top: 0;
left: 0;
z-index: 299;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
img {
display: block;
width: 561px;
height: 353px;
margin-top: 40px;
margin-left: 120px;
}
}
