<!DOCTYPE html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="UFT-8"> <!-- 设置编码格式 -->
<title>Title</title>
<style>
.top{
z-index:10;
position:fixed;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-200px;
background-color:white;
height:400px;
width:500px;
}
.base{
z-index:9;
position:fixed;
background-color:red;
top:0;
left:0;
right:0;
opacity:0.5;
}
</style>
</head>
<!--
利用poistion fixed 属性 将页面分层
利用 top:50%; left:50%; margin-left:-250px; margin-top:-200px; 使页面居中
利用 z-index 让页面按层次堆叠 大的在上
利用 opacity 改变页面透明度 范围0-1
-->
<body>
<div class="base">
aaaa
</div>
<div class="top">
遮罩层
</div>
<div style="height:5000px;background-color:green;">
<h1>内容</h1>
<h1>内容</h1>
<h1>内容</h1>
</div>
<div style="height:5000px;background-color:green">nnnnnnnn</div>
</body>
</html>
