遮罩层效果

chen106106

于 2013-06-21 15:41:30 发布

阅读量399

点赞数

文章标签： overlay 遮罩层

实现遮罩层效果需要注意的地方

1、背景层需要设置为透明

2、背景层需要占据整个屏幕

下面是具体的代码


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>


.content{
	width: 300px;
	height: 150px;
	overflow:auto; 
	border:2px solid #ccc; 
	background-color:#fff; 
	position:absolute; 
	top:50%; 
	left:50%; 
	margin-top: -75px;
	margin-left: -150px;
	z-index:1001;
	word-wrap: break-word; 
	padding:3px;
}

.loading-mask{
	width: 100%;
	height: 100%;
	position: fixed;
	opacity:0.3; 
	filter: alpha(opacity=30); 
	background-color:#000;
	left: 0px;
	top: 0px;
}
</style>

<title></title>
</head>

<body>
	<div class="loading-mask">
		<div class="content">

			<div style="color: white;font-size: 20px;">正在努力加载中...</div>
		</div>
	</div>

</body>

</html>