添加遮罩层
程序员文章站
2022-06-16 21:22:59
遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用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 }
主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。
推荐阅读
-
如何在同一个插件中添加多个action?
-
AJAX的跨域与JSONP(为文章自动添加短址的功能)_jquery
-
pcDuino安装synergy(添加PART2)
-
仿CSDN 右下角悬挂的浮动层效果_广告代码
-
imovie怎么添加文件中的音乐 imovie添加文件音乐教程
-
laravel5中添加自定义函数 vendor/composer/autoload_real.php on line 69
-
使用sftp操作文件并添加事务管理
-
android framework层input事件接收和派发
-
php 数组动态添加实现代码(最土团购系统的价格排序),数组团购_PHP教程
-
高德地图怎么将上下班路线添加到桌面?