根据这篇文章,实现简单的视差效果。我不明白为什么在div
之间会有一个空白间隔。这强制使用top
进行调整,这并不理想。请参考下面的代码:
body, html, main {
height:100%;
}
.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background:Red;
}
.cd-fixed-bg.cd-bg-2 {
background:green;
}
.cd-fixed-bg.cd-bg-3 {
background:blue;
}
.cd-fixed-bg.cd-bg-4 {
background:yellow;
}
.cd-fixed-bg.cd-bg-5{
background:orange;
}
.cd-scrolling-bg {
min-height: 100%;
background: black;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="normalize.css" rel="stylesheet">
<link href="styleSO.css" rel="stylesheet">
</head>
<body>
<main>
<div class="cd-fixed-bg cd-bg-1">
</div>
<div class="cd-scrolling-bg cd-color-2" >
</div>
<div class="cd-fixed-bg cd-bg-4">
<h1></h1>
</div>
<div class="cd-fixed-bg cd-bg-5">
<h1></h1>
</div>
<div class="cd-fixed-bg cd-bg-2">
<h1></h1>
</div>
</main>
</body>
</html>
正如您所看到的,我被迫执行类似于 top:-73px;
这样的操作,以便在 div
之间没有间隙。我尝试过使用 margin-top
,但并不成功。