CSS固定背景的缩放/平移与iPad不兼容

Question

我已经通过搜索功能彻底查找了，但没有找到任何与解决我的问题相关的答案。

在我的新网站上，我正在实现一个单一的固定背景图片（大约250x250像素），设置为随着用户向下滚动页面而移动。从其他帖子和我的实验中，CSS属性“background-attachment：fixed”无法在iPad / iPhone浏览器上使用。

一位用户建议创建一个“background-wrap”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;
}

这种方法在一定程度上是有效的。但对我来说，它存在一个问题：当用户在移动设备上进行捏合和缩放时，背景图像与前景内容的比例尺不同，导致出现杂乱重叠的效果。

如果答案显而易见，请原谅我。我已经花了数小时在这个网站和其他几个网站上研究这个问题，但没有任何收获。提前感谢您的帮助。

- user3681673

Answer 1

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

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

如果您提供更多与问题匹配的HTML / CSS代码，我可能可以给您更多详细信息。

- Vasiliy Artamonov