HTML+CSS实现加载页面的遮罩效果

HTML+CSS实现加载页面的遮罩效果

 

        在项目中遇到要用html+css写一个加载页面，加载页面分为三层：底层是上一步的用户输入界面，然后覆盖上一个阴影遮罩层，最上层是一个加载提示层位于中间。要求是遮罩层必须要覆盖底层界面的所有控件和文字，但同时又不能覆盖上层的加载提示层的控件和文字。效果如下图

        这个要求困扰了我好几天。在网上搜索类似问题，发现大家遇到的问题基本都是“为父div添加遮罩层如何不遮罩子div？”或者是“添加遮罩层如何不影响文字？” 不过从中我获取到的信息是实现遮罩层的两种方法：

• 使用background-color：rgba（），不影响子div和文字的透明度。
• 使用opacity ，会影响子div和文字的透明度。

        另外根据网上大佬的解析，以上方法在不同的浏览器中似乎存在兼容性问题，还有待日后深究。

错误的尝试

        我最开始的方法是把遮罩层div放在背景div下，做为子div。遮罩层div下再包含底层控件，以实现对它们的覆盖。然后在css进行设置。以下是简要代码：

HTML： 

1. <div id = "bg">

2. <!--遮罩层-->

3. <div id = "zz">

4. <div>

5. <!--底层控件-->

6. </div>

7. </div>

8. </div>

9.  

10. <div id = "loading">

11. <!--加载提示层控件 -->

12. </div>

CSS： 

1. #bg{

2. width: 1024px;

3. height: 768px;

4. background:url("图片路径") left top no-repeat;

5. background-size:contain;

6. position:relative;

7. }

8. #zz{

9. width:100%;

10. height:100%;

11. background-color:#000;

12. opacity:0.5;

13. position:absolute;

14. }

15. #loading{

16. position:absolute;

17. }

        效果实在是不可描述，底层控件的颜色全部发生了变异…… 

        如上图，背后的输入框就像染上了周边的颜色似的……

        但是如果不包含底层的控件和文字，就无法对其进行遮罩了。然后我尝试用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：

1. <!-- 遮罩层 -->

2. <div id="zz">

3. <div id="bg">

4. <!--底层控件-->

5. </div>

6. </div>

7.  

8. <div id = "loading">

9. <!-- 加载层控件 -->

10. </div>

 CSS：

1. #zz{

2. width: 100%;

3. height: 100%;

4. background-color: #000;

5. background: rgba(0, 0, 0, 0.7);

6. position:absolute;

7. }

8. #bg{

9. background: url("图片路径") left top no-repeat;

10. background-size: contain;

11. position: absolute;

12. z-index: -1; /*相对遮罩层*/

13. }

14. #loading{

15. position:absolute;

16. }

最终效果：