添加遮罩层


遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用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             }

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM