添加遮罩css,添加遮罩层

遮罩层效果相信是许多开发需求时候经常会碰到的一个情况，实现遮罩层效果的方式有很多种，下面介绍最简单的一种，利用css来实现遮罩

dom节点代码：

1  

css样式代码

1 .ui-progressbar{

2 position: absolute;

3 top:40%;

4 left:40%;

5 z-index: 99999999;

6 width:500px;

7 height:22px;

8 line-height:22px;

9 display:none;

10 }

11 .ui-progressbar-value

12 {

13 background-image: url("../images/pbar-ani.gif");

14 border:0px;

15 }

16 .shade

17 {

18 background:rgba(0, 0, 0, 0.4);

19 width:100%;

20 height:100%;

21 position: absolute;

22 z-index:99;

23 left:0px;

24 top:0px;

25 opacity:0.6;

26 filter:alpha(opacity=60);

27 display:none;

28 }

主要是通过控制两个盒子的显示层级，控制遮罩层的背景色和显示透明度来达到遮罩效果。