html - 强制 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 以更好地显示问题。如果您运行该代码段并一直向下滚动，您会看到第 9 行和第 10 行后面没有背景，因为显示背景的 div 不够高。

Answer 1

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

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

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