添加遮罩层

2019-12-17 16:01:06来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

添加遮罩层

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

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


原文链接:https://www.cnblogs.com/zyfBlogShare/p/12053263.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:手摸手教你编写你人生中第一个HTML页面

下一篇:Web基础了解版01-html-css