蒙层的写法总结

背景

  前段时间画页面有一个小需求，就是点击「分享」按钮，页面出现一个半透明的蒙层，然后突出显示一个图片，引导用户进行操作。

分析

  这个需求很常见，其实也很简单。但是以前没想过如何实现，现在突然要做这个，脑袋里一点思路都没有。现在审视一下，造成这个情况的原因有两个：一是代码写的少了，二是没有多拓展学习并进行思考。为了改变这种情况，需要在日常中加强对事情的拆解分析。
  蒙层的使用，其实就是展示两个元素，这两个元素视觉上覆盖在页面其他元素上。我将这两个元素称为「蒙层元素」和「突出元素」。只需要将「蒙层元素」的宽高覆盖整个页面，并且让其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;
  }
}

参考文章

掘金—你还在使用图片做引导蒙层