div蒙板半透明兼容ie6

最新推荐文章于 2018-11-21 14:25:11 发布

夏末_阳光依然耀眼

最新推荐文章于 2018-11-21 14:25:11 发布

阅读量705

点赞数

分类专栏： div+css 文章标签： div css 半透明蒙板

本文链接：https://blog.csdn.net/boyit0/article/details/38272855

版权

div+css 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蒙版兼容ie6</title>
<style type="text/css">
*{ margin:0; padding:0;}
li{ list-style:none;}
.mask{height:100%; width:100%; position:fixed; _position:absolute; left:0; top:0;  z-index:100; } 
* html .mask { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
.opacity{ opacity:0.6; filter: alpha(opacity=60); background-color:#000; }
.main{ height:1000px; position:relative; z-index:101;}
.pop{ 
	position:fixed; 
	left:50%; top:50%;  
    margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */  
    margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/  
    margin-top:0px;  
    position:fixed!important;/* FF IE7*/  
    position:absolute;/*IE6*/  
    _top:expression(eval(document.compatMode &&  
                document.compatMode=='CSS1Compat') ?  
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/  
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/   width:300px; text-align:center; padding:20px; background:#fff; z-index:102;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html{
    /*这个可以让IE6下滚动时无抖动*/
    background: url(about:black) no-repeat fixed; overflow:hidden;
}
</style>
<![endif]-->
</head>

<body>
<div class="mask opacity"></div>
<div class="main">
	<div class="pop">  
    	蒙版上的内容
    </div>
</div>
</body>
</html>