我正在尝试使用视差效果制作一个非常简单的网站。每个部分都有一个背景图像，标题和字幕。即使所有四个图像都是完全相同的高度（600px），但在最终部分出现之前只显示了第三部分的一小部分。页脚也没有显示。有些重叠正在进行，但我不明白它可能是什么。
body{ font-family: 'Comfortaa', cursive;}
header {
color:#fff;
background-color:blue;
font-size: 3em;
height:50px;
}
footer {
color:#fff;
background-color:red;
font-size: 3em;
height:50px;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
position: relative;
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 600px;
}
.bgimg-1 {
background-image: url("logo.jpg");
}
.bgimg-2 {
background-image: url("one.jpg");
}
.bgimg-3 {
background-image: url("two.jpg");
}
.bgimg-4 {
background-image: url("three.jpg");
}
.caption {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
color: #000;
}
.subtxtd{
color:#000;
text-align:center;
font-size: 1em;
text-shadow: 5px 5px 10px;
}
.sectitled {
color:#000;
font-size: 2em;
font-weight: 500;
text-shadow: 5px 5px 10px;
}
.subtxtl{
color:#fff;
text-align:center;
font-size: 1em;
text-shadow: 5px 5px 10px;
}
.sectitlel {
color:#fff;
font-size: 2em;
font-weight: 500;
text-shadow: 5px 5px 10px;
}<html>
<meta charset="utf-8" />
<head>
<title> test </title>
<link rel="stylesheet" type="text/css" href="style.scss">
</head>
<body>
<header>
This is the header
</header>
<main>
<div class="bgimg-1">
<div class="caption">
<div class="sectitled">Blake's 7</div>
<div class="subtxtd">This is great sci-fi</div>
</div>
</div>
<div class="bgimg-2">
<div class="caption">
<div class="sectitled">The Team</div>
<div class="subtxtd">All but one are good guys</div>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<div class="sectitlel">Avon</div>
<div class="subtxtl"> This one is tricky, watch out! </div>
<div>
</div>
<div class="bgimg-4">
<div class="caption">
<div class="sectitled">The Orac</div>
<div class="subtxtd">will give you the answer to everything!</div>
</div>
</div>
</main>
<footer>
This is the footer
</footer>
</body>
</html>问题完全取决于您有一个单字导致无效标记的事实。您的<div class="bgimg-3">用<div>而不是</div>结束.caption，这会导致解析器变得困惑而不是正确计算偏移/高度。
您可以通过使用 W3验证服务验证HTML来确保您具有有效的标记。您也可以使用 css验证器验证您的CSS（尽管在这种情况下，CSS是有效的）。
纠正<div>解决了问题，如以下示例：
body {
font-family: 'Comfortaa', cursive;
}
header {
color: #fff;
background-color: blue;
font-size: 3em;
height: 50px;
}
footer {
color: #fff;
background-color: red;
font-size: 3em;
height: 50px;
}
.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4 {
position: relative;
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 600px;
}
.bgimg-1 {
background-image: url("http://placehold.it/101");
}
.bgimg-2 {
background-image: url("http://placehold.it/102");
}
.bgimg-3 {
background-image: url("http://placehold.it/103");
}
.bgimg-4 {
background-image: url("http://placehold.it/104");
}
.caption {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
color: #000;
}
.subtxtd {
color: #000;
text-align: center;
font-size: 1em;
text-shadow: 5px 5px 10px;
}
.sectitled {
color: #000;
font-size: 2em;
font-weight: 500;
text-shadow: 5px 5px 10px;
}
.subtxtl {
color: #fff;
text-align: center;
font-size: 1em;
text-shadow: 5px 5px 10px;
}
.sectitlel {
color: #fff;
font-size: 2em;
font-weight: 500;
text-shadow: 5px 5px 10px;
}<html>
<meta charset="utf-8" />
<head>
<title> test </title>
<link rel="stylesheet" type="text/css" href="style.scss">
</head>
<body>
<header>
This is the header
</header>
<main>
<div class="bgimg-1">
<div class="caption">
<div class="sectitled">Blake's 7</div>
<div class="subtxtd">This is great sci-fi</div>
</div>
</div>
<div class="bgimg-2">
<div class="caption">
<div class="sectitled">The Team</div>
<div class="subtxtd">All but one are good guys</div>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<div class="sectitlel">Avon</div>
<div class="subtxtl"> This one is tricky, watch out! </div>
</div>
</div>
<div class="bgimg-4">
<div class="caption">
<div class="sectitled">The Orac</div>
<div class="subtxtd">will give you the answer to everything!</div>
</div>
</div>
</main>
<footer>
This is the footer
</footer>
</body>
</html>希望这会有所帮助！：）