html+css制作一个具有视差效果的主页
这篇文章是根据我在b站上跟着一个大佬做的视频做了一个具有视差效果的页面之后的记录。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css">
<title>Document</title>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">
image 1
</span>
</div>
</div>
<!-- section标签是html5新增标签,是用来定义文档的某个区域
(如:章节、页眉、页脚或者文档的其他区域)。 -->
<section class="section section-Light">
<h2>Hello</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Excepturi repellendus quasi autem, magnam aperiam reiciendis sequi
omnis incidunt explicabo. Blanditiis quis, reprehenderit itaque rerum
temporibus omnis fuga necessitatibus atque, dolore maxime impedit quae
deserunt provident ipsum enim. Nam asperiores earum praesentium pariatur
amet possimus quasi et quibusdam facere beatae quaerat voluptatibus non,
inventore doloribus autem odio impedit cumque doloremque expedita modi
quas aliquam necessitatibus architecto? Eveniet nobis excepturi dolorum
qui animi dicta neque magni, ipsam veritatis et sunt a necessitati
bus!</p>
</section>
<div class="pimg2">
<div class="ptext">
<!-- <span> 标签被用来组合文档中的行内元素 -->
<span class="border">
image 2
</span>
</div>
</div>
<section class="section section-dark">
<h2>World</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Excepturi repellendus quasi autem, magnam aperiam reiciendis sequi
omnis incidunt explicabo. Blanditiis quis, reprehenderit itaque rerum
temporibus omnis fuga necessitatibus atque, dolore maxime impedit quae
deserunt </p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
image 3
</span>
</div>
</div>
<section class="section section-Light">
<h2>javaScript</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Excepturi repellendus quasi autem, magnam aperiam reiciendis sequi
omnis incidunt explicabo. Blanditiis quis, reprehenderit itaque rerum
temporibus omnis fuga necessitatibus atque, dolore maxime impedit quae
deserunt </p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">
image 4
</span>
</div>
</div>
</html>
css
body,html{
height: 100%;
margin: 0;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
/* 行高 */
line-height: 1.8em;
color: #666;
}
.pimg1,.pimg2,.pimg3,.pimg4{
position: relative;
/* opacity 不透明度 */
opacity: 0.7;
/* 图片定位 居中*/
background-position: center;
/* 图片尺寸 全覆盖 */
background-size: cover;
/* 设置图片为不重复 */
background-repeat: no-repeat;
/* 视差效果显示,将图片固定 */
background-attachment: fixed;
}
.pimg1{
background-image: url('../images/yh.jpg');
min-height: 100%;
}
.pimg2{
background-image: url('../images/city1.jpg');
min-height: 400px;
}
.pimg3{
background-image: url('../images/city2.jpg');
min-height: 400px;
}
.pimg4{
background-image: url('../images/city3.jpg');
min-height: 100%;
}
.section{
text-align: center;
padding: 50px 80px;
}
.section-Light{
background: #f4f4f4;
color: #666;
}
.section-dark{
background: #282e34;
color: #ddd;
}
.ptext{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 27px;
/* 字间距 */
letter-spacing: 8px;
/* 将字母全部变为大写 */
text-transform: uppercase;
}
.pimg1 .ptext span{
background-color: #111;
color: #fff;
padding: 20px;
}
.pimg4 .ptext span{
background-color: #111;
color: #fff;
padding: 20px;
}
/* 响应式取消视差效果 当页面宽度小于500px的时候,取消图片的固定*/
@media(max-width: 500px){
.pimg1,.pimg2,.pimg3,.pimg4{
background-attachment: scroll;
}
}