背景尺寸封面不适用于移动设备上的较长页面

Question

这是一个 Next.js 项目，这里使用的移动设备是 google pixel 3a。我有一个问题，在较长的页面上我的背景图像根本不会显示。这是它在高度不超过视口高度的页面上的外观

但是在一些需要滚动到底部的较长页面上，它根本不显示

body {
  background-image: url("https://via.placeholder.com/500");
  background-size: cover;
  margin: 0;
  padding-left: 5vw;
  padding-right: 5vw;
  height: 100vh;
  min-height: 100%;
  width: 90vw;
  font-family: system-ui;
  overflow-x: hidden;
  font-size: 1.3rem;
}

如果我将背景大小更改为自动，那么它将适用于每一页，但我想要封面。也许我不明白封面对于需要滚动的页面是如何工作的，但我希望背景图像显示为第一张图像中的样子，如果内容比视口长，则内容应该只滚动图像没有移动。任何帮助表示赞赏。谢谢。

Answer 1

如果我理解正确，您希望背景图像至少填满视口，但如果主体高于您希望它填满整个主体。

因此，告诉它body的最小高度必须是100vh，不要设置实际高度，让它从内容中计算出来。

我在这个 sn-p 中假设您只需要一个背景副本，居中并使用大小覆盖（因此根据相对纵横比，它可能会在顶部/底部或侧面被裁剪）。

在 sn-p 中放置了一个虚拟 div 以确保我们可以滚动。

body {
  background-image: url("https://via.placeholder.com/500");
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  margin: 0;
  padding-left: 5vw;
  padding-right: 5vw;
  min-height: 100vh;
  width: 90vw;
  font-family: system-ui;
  overflow-x: hidden;
  font-size: 1.3rem;
}

div {
  height: 350vh;
}

<div></div>