HTML+CSS实现加载页面的遮罩效果
在项目中遇到要用html+css写一个加载页面，加载页面分为三层：底层是上一步的用户输入界面，然后覆盖上一个阴影遮罩层，最上层是一个加载提示层位于中间。要求是遮罩层必须要覆盖底层界面的所有控件和文字，但同时又不能覆盖上层的加载提示层的控件和文字。效果如下图
这个要求困扰了我好几天。在网上搜索类似问题，发现大家遇到的问题基本都是“为父div添加遮罩层如何不遮罩子div？”或者是“添加遮罩层如何不影响文字？” 不过从中我获取到的信息是实现遮罩层的两种方法：
使用background-color：rgba（），不影响子div和文字的透明度。使用opacity ，会影响子div和文字的透明度。
另外根据网上大佬的解析，以上方法在不同的浏览器中似乎存在兼容性问题，还有待日后深究。
错误的尝试
我最开始的方法是把遮罩层div放在背景div下，做为子div。遮罩层div下再包含底层控件，以实现对它们的覆盖。然后在css进行设置。以下是简要代码：
HTML：
<div id = "bg">
<!--遮罩层-->
<div id = "zz">
<div>
<!--底层控件-->
</div>
</div>
</div>
<div id = "loading">
<!--加载提示层控件 -->
</div>
CSS：
#bg{
width: 1024px;
height: 768px;
background:url("图片路径") left top no-repeat;
background-size:contain;
position:relative;
}
#zz{
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
position:absolute;
}
#loading{
position:absolute;
}
效果实在是不可描述，底层控件的颜色全部发生了变异……
如上图，背后的输入框就像染上了周边的颜色似的……
但是如果不包含底层的控件和文字，就无法对其进行遮罩了。然后我尝试用z-index属性进行设置，但依旧没有效果。不过我认为问题应该就是出在父亲和孩子div的z-index属性身上，然后再对上述问题进行检索。最后在本网站看到下面这篇文章：父子间的z-index关系
文章作者概括了父子div间z-index属性的关系：“z-index是要考虑父级的，如果子级z-index为0，那么父级就是200000也不会覆盖住子级。如果想要父级覆盖子级，那么父级不需要设置z-index，只要孩子设置就z-index就可以了。”（注：经本人实例测试，孩子z-index值应设为负，且父亲z-index不能设值，否则也不会覆盖，原因暂时未知）虽然没有详细地解析其中的原因，但也给了我一个启发。
最终的实现
根据上述的父div覆盖子div的启发，接下来我尝试把遮罩层div放在底层的外面（真别扭，明明层次应该在中间），代码如下：
HTML：
<!-- 遮罩层 -->
<div id="zz">
<div id="bg">
<!--底层控件-->
</div>
</div>
<div id = "loading">
<!-- 加载层控件 -->
</div>
CSS：
#zz{
width: 100%;
height: 100%;
background-color: #000;
background: rgba(0, 0, 0, 0.7);
position:absolute;
}
#bg{
background: url("图片路径") left top no-repeat;
background-size: contain;
position: absolute;
z-index: -1; /*相对遮罩层*/
}
#loading{
position:absolute;
}
最终效果：
