dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 760|回复: 0

[Html/Css] 添加遮罩层

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3995

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3995

    发表于 2020-4-6 20:00:05 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用CSS来实现遮罩
    dom节点代码:
    [HTML] 纯文本查看 复制代码
     1 <!-- 进度条遮罩 -->  <t:div id="shade" styleClass="shade" > </t:div>

    CSS样式代码
    [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; 
                }

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


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2025-2-2 04:35 , Processed in 0.098590 second(s), 29 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表