CSS实现遮盖层

最新推荐文章于 2024-07-29 11:26:16 发布

nelson

最新推荐文章于 2024-07-29 11:26:16 发布

阅读量2.5k

点赞数

分类专栏： CSS 文章标签： css filter ie function layer html

本文链接：https://blog.csdn.net/Do_it__/article/details/6977056

版权

CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

大部分遮盖层都是通过JS去获取高度和宽度来定位的，而现在采用的大部分是CSS去做，除了一个为了兼容IE6所必要的js。

大致原理就是：让遮盖层的height和width达到100%来去实现，IE6下需要将body的height设为100%才有效。

具体的代码如下：

<!doctype html>
<html>
<head>
	<title>CSS 实现遮盖层</title>
	<meta charset="gb2312" />
	<style>
	/* the style for layer or mask */
	body{_height:100%;}
	#mask, #undermask{
		display: none;
		position:fixed;
		_position:absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 33;
		background-color: #101010;
		filter: Alpha(opacity=40);
		opacity: .4;
	}
	/* page show */
	#page{width:960px;margin:0 auto;height:1000px;text-align:center;background-color:#c00;}
	</style>
</head>
<body>
<div id="page">)))))))))))))CSS 实现遮盖层测试(((((((((((((((</div>
<div id="mask"></div>
<script>
	(function(mask){
		// for IE 6
		if(document.uniqueID && !window.XMLHttpRequest){
			document.getElementsByTagName('html')[0].style.overflow = 'hidden';
		}
		mask.style.display = 'block';
	})(document.getElementById('mask'));
</script>
</body>
</html>

就是这样，很简单明了。