强制 div 高度以适合透视的内容

Question

我正在尝试使用here 提供的技术使我的网站背景以比内容慢的速度滚动。我不想修复背景，只是更慢。

这是 HTML 的样子：

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax_group {
  position: relative;
  width: 960px;
  transform-style: preserve-3d;
  height: 100%; /* <--- PROBLEM HERE */
}

.parallax_layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.background {
  background-image: url("https://static.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  background-position: top;
  background-size: 960px 1000px;
  background-repeat: repeat-y;
  transform: translateZ(-1px) scale(2);
}

.page {
  transform: translateZ(0) scale(1);
}

<div class="parallax">
  <div class="parallax_group">
    <div class="background parallax_layer"></div>
    <div class="page parallax_layer">
      <p>Line 1</p>
      <p>Line 2</p>
      <p>Line 3</p>
      <p>Line 4</p>
      <p>Line 5</p>
      <p>Line 6</p>
      <p>Line 7</p>
      <p>Line 8</p>
      <p>Line 9</p>
      <p>Line 10</p>
    </div>
  </div>
</div>

它用于创建视差效果。但是问题是包含背景的div有一个固定的大小，这里的100%解释为视差div的大小，而不是内容的大小。但内容因一页而异。如果我给背景一个固定大小，那么在某些页面上它会太长而在其他页面上太短。

例如，如果内容有很多行，则会溢出背景。如果内容只有几行，那么背景会很长。

我尝试了各种技巧以使其适应内容（例如 flex），但没有任何效果，背景始终具有固定大小。我唯一没有尝试过的是javascript。有没有办法在 CSS 中做到这一点？

更新：我修改了 HTML 以更好地显示问题。如果你运行 sn-p 并一直向下滚动，你会看到第 9 行和第 10 行后面没有背景，因为显示背景的 div 不够高。

Answer 1

尝试删除 .background 类中的固定背景大小。

我创建了一个 sn-p 来测试它，它看起来也适用于不同的图像，但如果你可以提供一些你想设置为背景的图像尺寸，我可以做进一步的测试。

.parallax {
  perspective: 1px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax_group {
  position: relative;
  width: 960px;
  transform-style: preserve-3d;

  height: 100%;  /* <--- PROBLEM HERE */

}

.parallax_layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.background {
  background-image: url("https://static.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  background-position: top;
  background-repeat: repeat-y;
  transform: translateZ(-1px) scale(2);
}

.page {
  transform: translateZ(0) scale(1);
}

<div class="parallax">
  <div class="parallax_group">
    <div class="background parallax_layer"></div>
    <div class="page parallax_layer">
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
      <p>Content...</p>
    </div>
  </div>
</div>