<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视觉差效果</title>
<style>
html,body{
margin: 0;
padding: 0;
}
section{
width: 100%;
min-height: 100vh;
line-height: 100vh;
background: rgba(0, 0, 0, .7);
color: #fff;
text-align: center;
font-size: 20vh;
background-attachment: fixed;
background-size: 100% 100%;
background-size: cover;
background-position: center center;
}
.imgBox1{
background-image: url('http://image.uc.cn/s/wemedia/s/upload/2020/b2a3c744f03975e021365c58be3d36f8.jpg');
}
.imgBox2{
background-image: url('http://image.uc.cn/s/wemedia/s/upload/2020/2e2468388ae2b2acd4a1c749d9da8a45.jpg');
}
.imgBox3{
background-image: url('http://image.uc.cn/s/wemedia/s/upload/2020/206a144160ba659e24c126ebef4c5f4d.jpg');
}
</style>
</head>
<body>
<section class="text">1</section>
<section class="imgBox1">2</section>
<section class="text">3</section>
<section class="imgBox2">4</section>
<section class="text">5</section>
<section class="imgBox3">6</section>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.