0

我正在尝试使用视差效果制作一个非常简单的网站，其中包含四个部分。每个部分都有一个背景图像、一个标题和一个副标题。尽管所有四个图像的高度完全相同（600 像素），但在最后一个部分出现之前，第三部分仅显示了一小部分。页脚也不显示。有一些重叠发生，但我不明白它可能是什么。

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>

4

1 回答 1

1

问题完全在于您有一个拼写错误导致无效标记的事实。您以 a而不是 a<div class="bgimg-3">结尾，这会导致解析器感到困惑并且无法正确计算偏移量/高度。.caption<div></div>

您可以通过使用W3 验证服务验证您的 HTML 来确保您拥有有效的标记。您还可以使用CSS Validator验证您的 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>

希望这可以帮助！:)

于 2017-11-20T21:16:47.293 回答