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;
-
}
最终效果: