添加遮罩层
程序员文章站
2022-03-21 17:33:25
遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用CSS来实现遮罩 dom节点代码: 1 CSS样式代码 1 .u ......
遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用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 }
主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。
上一篇: Ajax 的基本使用
下一篇: RMAN备份数据库与表空间