您好,欢迎来到飒榕旅游知识分享网。
搜索
您的当前位置:首页给你的网页弹窗加个遮罩

给你的网页弹窗加个遮罩

来源:飒榕旅游知识分享网
本篇文章为你介绍使用css实现网页遮罩效果,主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。希望对学习css的朋友有帮助。

给你的弹窗加个遮罩

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

dom节点代码:

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

CSS样式代码

.ui-progressbar{
 position: absolute;
 top:40%;
 left:40%;
 z-index: 99999999;
 width:500px;
 height:22px;
 line-height:22px;
 display:none;
 }
 .ui-progressbar-value 
 { 
 background-image: url("../images/pbar-ani.gif"); 
 border:0px;
 }
 .shade
 {
 background:rgba(0, 0, 0, 0.4);
 width:100%;
 height:100%;
 position: absolute;
 z-index:99;
 left:0px;
 top:0px;
 opacity:0.6;
 filter:alpha(opacity=60);
 display:none; 
 }

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

Copyright © 2019- sarr.cn 版权所有 赣ICP备2024042794号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务