当前位置:首页 > html教程 > 正文内容

给你的网页弹窗加个遮罩_html5教程,遮罩,css

搜教程4年前 (2020-03-04)html教程153
本篇文章为你介绍使用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; 
            }

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

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

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17324.html

标签: 遮罩css
分享给朋友:

“给你的网页弹窗加个遮罩_html5教程,遮罩,css” 的相关文章

css3和css的区分是什么【html5教程】,css3,css,区别

css3和css的区分是什么【html5教程】,css3,css,区别

css3和css的区分有哪些?许多人都会把css和css3等量齐观,跟着css3的提高,css和css3照样有许多区分的,下面我们来总结一下css3和css的区分是什么? css严厉的说就是css2.0,跟着css的逐步生长,css2.0简称css了。 css3和css的不同点:属性...

怎样用span css设置div内部份字体色彩?【html5教程】,span,css设置div颜色

怎样用span css设置div内部份字体色彩?【html5教程】,span,css设置div颜色

本篇文章给人人带来的内容是关于怎样用span css设置div内部份字体色彩,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 用span标签设置div内放一段笔墨中的部份笔墨字体色彩要领。 一段笔墨放在DIV内或P内,当我们设置div或p设置字体色彩,内里悉数笔墨的字体色彩就...

CSS网页规划小技能汇总【html5教程】,CSS网页,CSS网页布局小技巧

CSS网页规划小技能汇总【html5教程】,CSS网页,CSS网页布局小技巧

本篇文章给人人带来的内容是关于CSS网页规划小技能汇总,有肯定的参考价值,有需要的朋侪能够参考一下,愿望对你有所协助。 对CSS网页规划的技能,可谓是名目繁多。这里将合适新手的CSS网页规划的小技能总结出来,也许对您更有现实的参考价值: 1、ul标签在Mozilla中默许是有paddin...

css计数器(counter)是什么【html5教程】,css计数器,css3,counter

css计数器(counter)是什么【html5教程】,css计数器,css3,counter

本篇文章给人人带来的内容是引见css计数器(counter)是什么,让人人简朴的相识css计数器的相干属性。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。 css计数器是什么? 计数器是css3供应的一个壮大的东西,是一种能够让我们运用CSS给元素自动编号的要领。运用它能够...

CSS3中边框属性怎样运用【html5教程】,border

CSS3中边框属性怎样运用【html5教程】,border

本日将和人人分享css3中边框属性的用法,具有肯定的参考价值,愿望对人人有所协助。 CSS3中的边框增加了很多新的功用,使我们的边框设想变得越发悦目,接下来将在文中细致的为人人引见几种边框的用法 css3边框 (1)边框暗影 box-shadow:h-shadow v-shadow bl...

border-radius属性怎样运用【html5教程】,border-radius属性,css3

border-radius属性怎样运用【html5教程】,border-radius属性,css3

border-radius属性是CSS3中的一个简写属性,用于为边框建立(1~4个)圆角结果;基础语法:border-radius: 1-4 length|% 。 CSS3 border-radius属性 作用:border-radius 属性用于建立圆角 申明:border-radi...