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

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

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

问题描述

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

解决方案

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

还要明白的是z-index的属性以及其用法，z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注意：元素可拥有负的z-index属性值，并且只在定位元素上生效，position:absolute;给大家举一个生动的例子，如下所示：

相信看了图片大家就一目了然了，接下来看看我们的css是如何设置的：

这是html代码：

这是css代码：

当我们运行的时候:

点击按钮，实现遮罩效果如图所示：

点击关闭按钮，界面回到初始的样子，就这样我们的遮罩效果就简单的实现了，但这只是最简单的办法，接下来还要深入学习相关知识。

结语

那么在最后简单的总结一下我们实现遮罩的整个过程，创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，并且对其他的元素不会产生影响，并且将其设置为半透明状态，我们可以根据需要调节透明度，同时再创建一个元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

更多精彩文章：

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！