添加遮罩层

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

dom节点代码：

 1 <!-- 进度条遮罩 -->  <t:div id="shade" styleClass="shade" > </t:div> 

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             }

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

posted @ 2019-12-17 10:59  菜鸡开发阿飞  阅读(1021)  评论(0)  编辑  收藏  举报