<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
::-webkit-scrollbar {
display: none;
}
#content {
width: 100vw;
height: auto;
}
section {
height: 100vh;
background: #4cbfc4;
color: #fff;
font-size: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
.img {
background-size: auto;
overflow: hidden;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
max-width: 100%;
user-select: none;
cursor: default;
}
#img1 {
/*下面换成你要替换的图片*/
background-image: url(./01.jpg);
}
#img2 {
background-image: url(./02.jpg);
}
#img3 {
background-image: url(./03.jpg);
}
</style>
<body>
<div>
<section id="img1" class="img">IMG1</section>
<section id="content1">CONTENT1</section>
<section id="img2" class="img">IMG2</section>
<section id="content2">CONTENT2</section>
<section id="img3" class="img">IMG3</section>
<section id="footer">FOOTER</section>
</div>
</body>
</html>
效果预览