zoukankan      html  css  js  c++  java
  • 添加遮罩层

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

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

  • 相关阅读:
    C#Web网站的创建
    C#Repeater控件的使用
    C#LINQ
    C#异常处理
    C#LINQ
    C#匿名委托,匿名函数,lambda表达式
    C#chart图表的应用
    C#用户控件的使用
    用 Python写 daemon
    CentOS 5.4 制作 Python 2.6 RPM 包的方法
  • 原文地址:https://www.cnblogs.com/zyfBlogShare/p/12053263.html
Copyright © 2011-2022 走看看