时间戳

首页 > 解决方案 > 文本滚动时如何使背景图像保持不变？（苹果浏览器）

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

问题描述

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

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

我曾经background-attachment: fixed;在 chrome (for windows) 上解决这个问题，但发现 safari 不支持这个。

该网站的代码可以访问：这里。（Control + U 用于页面源）

tldr; 我需要找到background-attachment: fixed;适用于我的网站的 safari 的等价物。

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

标签： htmljquerycsssafaribackground-attachment

解决方案

在这种情况下，由于您指出的 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 可能会在顶部/底部或侧面被裁剪以使其适合）。

推荐阅读