Question

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

＆＃13;

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;
 }

＆＃13;

<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>

＆＃13;

Answer 1

问题完全在于你有一个拼写错误导致无效的标记。您的<div class="bgimg-3">使用.caption而不是<div>结束</div>，这会导致解析器混淆并且无法正确计算偏移/高度。

您可以通过 W3 Validation Service 验证HTML来确保您拥有有效的标记。您还可以使用 CSS Validator 验证您的CSS（尽管在这种情况下CSS有效）。

更正<div>可以解决问题，如以下示例所示：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！：）

纯css视差效应产生不均匀的部分

1 个答案: