探索如何使用css实现加载页面的遮罩效果

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

在开发过程中，经常会遇到这样的问题：如何使用css实现加载页面的遮罩效果？网络上大多是使用元素的opacity属性，设置遮罩层的效果，样式设置如下：background-color: grey; opacity:0.3;使用css的opcity属性改变某个元素的透明度，但其子元素下的透明度也会被改变，那么有什么办法可以实现加载页面的遮罩呢？

在解决问题之前我们必须要分析加载页面，将他分为三层：底层是上一步的输入界面，接着覆盖上一个阴影遮罩层，最上层是一个加载提示层位于中间。要求是遮罩层必须要覆盖底层界面的所有控件和文字，但同时又不能覆盖上层的加载提示层的控件和文字。那么有没有什么简单的办法能实现遮罩呢？我们可以使用css的z-index属性来实现简单的效果。