如何在文本滚动时保留背景图像？ （苹果浏览器）
How to make background image stay while text scrolls? (Safari)
在您尝试关闭之前：我知道那里有类似的问题和答案，但是 none 这些解决方案对我有用，而不是将滚动全部锁定在一起。这可能是因为我使用的是 w3schools 的网站模板。
我正在为一个学校项目制作一个网站，我希望其中的背景是一张树叶图片。不幸的是，这张图片似乎没有覆盖整个页面，导致它向下重复。这是一个问题。
我已经在 chrome（对于 windows）上使用 background-attachment: fixed; 解决了这个问题，但是发现 safari 不支持这个。
可访问网站代码：here。 （Control + U 为页面源代码）
tldr；我需要为适合我网站的 safari 找到 background-attachment: fixed; 的等价物。
提示：您必须在 Safari 浏览器中测试页面才能看到问题。
在这种情况下，由于您指出的 Safari 附件修复问题，您无法将背景保留在实际主体上。
然而，您可以将背景放在伪元素上，然后使用 'ordinary' 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 可能会被裁剪 top/bottom 或在侧面裁剪以使其适合）。
在您尝试关闭之前：我知道那里有类似的问题和答案，但是 none 这些解决方案对我有用，而不是将滚动全部锁定在一起。这可能是因为我使用的是 w3schools 的网站模板。
我正在为一个学校项目制作一个网站，我希望其中的背景是一张树叶图片。不幸的是，这张图片似乎没有覆盖整个页面，导致它向下重复。这是一个问题。
我已经在 chrome（对于 windows）上使用 background-attachment: fixed; 解决了这个问题，但是发现 safari 不支持这个。
可访问网站代码：here。 （Control + U 为页面源代码）
tldr；我需要为适合我网站的 safari 找到 background-attachment: fixed; 的等价物。
提示：您必须在 Safari 浏览器中测试页面才能看到问题。
在这种情况下，由于您指出的 Safari 附件修复问题，您无法将背景保留在实际主体上。
然而，您可以将背景放在伪元素上，然后使用 'ordinary' 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 可能会被裁剪 top/bottom 或在侧面裁剪以使其适合）。