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

Question

我正在尝试使用视差效果制作一个非常简单的网站，其中包含四个部分。每个部分都有一个背景图像、一个标题和一个副标题。尽管所有四张图片的高度都完全相同 (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>

Answer 1

这个问题完全是因为您有一个拼写错误导致标记无效。您的 <div class="bgimg-3"> 以 <div> 而不是 </div> 结束 .caption，这导致解析器变得混乱并且无法正确计算偏移量/高度。

您可以通过使用 W3 Validation Service. You can also validate your CSS with the CSS Validator 验证您的 HTML 来确保您拥有有效的标记（虽然在这种情况下 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>

希望对您有所帮助！ :)

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

Pure css parallax effect producing uneven sections

css

parallax

pure-css