文本滚动时如何使背景图像保持不变？ （苹果浏览器）

Question

在您尝试关闭之前：我知道那里有类似的问题和答案，但是这些解决方案都不适合我，而只是将滚动锁定在一起。这可能是因为我使用的是 w3schools 的网站模板。

我正在为一个学校项目制作一个网站，我希望背景是一张树叶图片。不幸的是，这张图片似乎没有覆盖整页，导致它向下重复。这是个问题。

我已经使用background-attachment: fixed; 在 chrome 上解决了这个问题（适用于 windows），但发现 safari 不支持这个。

可以访问该网站的代码：here。 （Control + U 为页面源）

tldr;我需要为适用于我的网站的 safari 找到与 background-attachment: fixed; 等效的内容。

提示：您必须在 safari 中测试页面才能看到问题。

Answer 1

在这种情况下，由于您指出的 Safari 附件修复问题，您无法将背景保留在实际主体上。

但是，您可以将背景放在伪元素上，然后使用“普通”CSS 固定位置，这样即使向下滚动，它也会保持原位。

这是一个基本的例子：

body {
  width: 100vw;
  height: 200vh;
  margin: 0;
  padding: 0;
}

body::before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url("https://hdwallsource.com/img/2014/5/green-background-21874-22427-hd-wallpapers.jpg");
  background-size: cover;
  z-index: -1; /* added */
}

注意：背景大小设置为覆盖，因此无论其纵横比如何，整个视口都被覆盖（某些 img 可能会在顶部/底部或侧面被裁剪以使其适合）。