防止绝对定位的 div 增加其父项的大小

Question

我有一个 div 装满了内容，我想 在它后面堆叠背景图像 。我 不想合并这些背景图像， 因为我在 Google PageSpeed 上得到了一个很长的“最大内容绘画”，并且发现堆叠较小的图像可以获得更好的分数在这个指标上。 页面必须滚动到内容底部，但我希望背景图像在内容结束时被剪短。

下面的代码几乎可以满足我的要求，但不会缩短背景图像。

img {
 opacity: 0.3;
 z-index: -999;
}

.abs {
  position: absolute;
}

footer {
  background-color: rgba(238,130,238, 1);
}

.overflow{
  overflow: hidden;
}

<div class='overflow'>
  <div class='abs'>
    <img src='https://sitesent.com/static/6d91c86c0fde632ba4cd01062fd9ccfa/5a190/gatsby-astronaut.png' />
    <img src='https://sitesent.com/static/6d91c86c0fde632ba4cd01062fd9ccfa/5a190/gatsby-astronaut.png' />
  </div>
  <h1>Hi people</h1>
  <p>This page should be able to scroll.</p>
  <div class='filler'>
    <p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
    <p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
    <p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
  </div>
  <footer>
    But the bottom of the page should be right below this line. The background images should not shrink, but should be cut off at this point
  </footer>
</div>

我的项目是 gatsby，所以我 created a sandbox 使用 gatsby 来解决这个问题，但是我在沙箱方面遇到了一些问题，所以我认为它不能完全工作

Answer 1

添加：

position: relative;

到 class 的元素：

overflow

更新演示： Updated jsfiddle

防止绝对定位的 div 增加其父项的大小

Prevent an absolutely positioned div from increasing the size of it's parent

html

css

background