给你的网页弹窗加个遮罩

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

给你的网页弹窗加个遮罩

给你的弹窗加个遮罩

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

dom节点代码:

 

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;             }

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

以上就是给你的网页弹窗加个遮罩的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614892.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
CSS3实现各种表情(代码示例)
上一篇 2025年12月24日 04:37:31
css制作轮播图
下一篇 2025年12月24日 04:37:43

相关推荐

发表回复

登录后才能评论
关注微信