4

我已经彻底使用了搜索功能，但没有找到足够相关的答案来解决我的问题。

在我的新网站上，我正在实现一个固定的背景图像（大约 250x250 像素），设置为在用户向下滚动页面时跟随他们。从其他帖子和我自己的实验来看，CSS 属性“background-attachment:fixed”不适用于 iPad / iPhone 浏览器。

一位用户提出了一种解决方法，即创建一个看起来像这样的“背景包装”div：

#background-wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('xx.jpg');
    background-attachment: fixed;
}

这在一定程度上有效。这个解决方案的问题（对我来说）是，当用户在移动设备上进行捏合和缩放时，背景图像的缩放比例与前景内容的比例不同，从而产生草率、重叠的结果。

如果答案是显而易见的，请原谅我。我已经研究了几个小时（在这个网站和其他几个网站上），但无济于事。提前谢谢了。

4

1 回答 1

0

正如您正确提到的，它在 iOS Safari 中无法正常工作的Caniuse上指定。background-attachment: fixed

我建议您应用position: fixed到您的背景元素，这应该在当今所有现代浏览器中都能正常工作：Caniuse

如果您愿意提供更多与您的问题相匹配的 HTML / CSS 代码，我可能会为您提供有关此问题的更多详细信息。

于 2020-09-29T11:47:26.043 回答