<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#back {
position: relative;
100%;
height: 2000px;
background-image: url(138-141005164034.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
/* 效果：鼠标滚动时，背景图片静止不动
*/
}
#color {
position: absolute;
100%;
height: 2000px;
background: rgba(45,89,220,0.6);//让背景有朦胧感
}
#main {
position: absolute;
margin-left: 20%;
top: 100px;
900px;
height: 1000px;
border: 1px solid;
background-color: white;
}
@media screen and (max- 1300px) {
#main {
margin-left: 10%;
}
}
@media screen and (max- 900px) {
#main {
margin-left: 0;
}
}
</style>
</head>
<body>
<div id="back">
<div id="color">
<div id="main">
</div>
</div>
</div>
</body>
</html>