CSS 修复了背景缩放/平移在 iPad 上的效果不佳

Question

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

在我的新网站上，我正在实现一个固定的背景图像(大约 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;
}

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

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

Answer 1

它在 Caniuse 上指定那个background-attachment: fixed正如您正确提到的，在 iOS Safari 中无法正常工作。
我建议你申请 position: fixed对于您的背景元素，这应该在当今所有现代浏览器中都能正常工作:Caniuse
如果您愿意提供更多与您的问题匹配的 HTML/CSS 代码，我可能会为您提供有关此问题的更多详细信息。