01月15, 2016

网页遮罩层使用方式

效果:

QQ截图20160115165627.jpg


HTML:


    页面正在加载中...


CSS:

*html{
    background-image:url(about:blank);
    background-attachment:fixed;
}
.panel-mask{
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
    position: fixed;
    top: 0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
.panel-mask .panel-mask-loading{
    width: 400px;
    text-align: center;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -200px;
    margin-bottom: 0px;
}

@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
    .panel-mask{
        background-color:#000000;
        filter:Alpha(opacity=30);
        position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
        *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
    }
    .panel-mask .panel-mask-loading{
        position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
    }
}


本文链接:https://lxyit.com/article/show/94.html

-- EOF --

作者 admin 发表于 2016-01-15 16:57:16 ,最后修改于 2016-01-15 16:57:16