纯CSS视差-滚动后隐藏在视差图片下的文本

Question

我正在尝试使这个视差效果的文本不像效果那样向下滚动。

我相信这与html CSS代码(Overflow)有关，我试着放入不同的地方，但不起作用。有没有办法让我的视差像现在这样工作，当你向下滚动时，文本仍然是完全可见的？因为只要你向下滚动视差，文本也会滚动，但当你到达文本时，一些已经向上滚动了。

​

html {
  height: 100%;
  overflow: hidden;
}

body {
  color: #fff;
  margin: 0;
  padding: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: "Luna"
}

header {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 30vw 0 5vw;
  position: relative;
  transform-style: inherit;
  width: 100vw;
}

header h1 {
  margin-top: -100px;
}

header,
header:before {
  background: 50% 50% / cover;
}

header:before {
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-image: url('../img/lake.jpg');
  background-size: cover;
  transform-origin: center center 0;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  min-height: 100vh;
}

header * {
  font-weight: normal;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0;
  padding: 1em 0;
}

p {
  color: grey;
}

.container {
  max-width: 95%;
  margin: 0 auto;
  display: block;
}

<header>
  <h1>Parallax Effect</h1>
  <p>Pure CSS // No JavaScript!</p>
</header>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
    maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
    eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>

</div>

​

Answer 1

您的container类需要相对于其父对象进行定位，才能显示在视差背景的前面。

.container {
  max-width: 95%;
  margin: 0 auto;
  display: block;
  position: relative;
}

您还需要添加一些背景颜色，以便在视觉上将其分开。

下面是一个具有类似效果的Codepen demo及其accompanying article。