背景位置在 iphone 设备中不起作用。有什么办法可以解决这个问题吗？答案

【问题标题】：Background-position is not working in iphone devices. any solution to solve this issue?背景位置在 iphone 设备中不起作用。有什么办法可以解决这个问题吗？
【发布时间】：2019-11-21 20:01:13
【问题描述】：

<div class="home-banner"></div>

我只有在 iPhone 设备中的背景位置有问题。但它在其他设备和浏览器以及响应式模拟器上运行良好。但它不适用于真正的 iPhone 设备。

这是我使用的 CSS：-

@media（最小宽度：315px）和（最大宽度：600px）{ .home-banner { 背景图片：网址（http://www.asdaniadventures.com/cmsasdani/image/data/banner/Banner.jpg）；高度：100vh；背景尺寸：封面；背景位置：65% 0；背景重复：不重复； } }

【问题讨论】：

请您提供有关该问题的更多详细信息。 iPhone 上到底发生了什么？以及您检查的是哪种型号的 iPhone？在哪个浏览器上？
@nmak18 感谢您的回复。实际上我的 CSS 在其他设备上运行良好。但它们在 iphone 6、7、8 中无法使用。如果您也想查看，这也是该网站：- asdaniadventures.com
您好，看看这个应该会回答您的查询stackoverflow.com/questions/3183467/…

标签： jquery html css responsive-design responsive

【解决方案1】：

问题是由于 iOS 设备上的 Safari 中缺乏对 background-attachment 的支持。将background-attachment: fixed 更改为background-attachment: scroll，后台位置问题应该会得到解决。

有关支持矩阵，请参阅caniuse。您可能想查看在 iPhone 上创建视差效果或禁用视差效果的替代解决方案

Alternative solution provided by Callum Findlay

【讨论】：

我刚刚对 Callum Findlay 解决方案进行了测试。它在 iOS 上的 Safari 13 中不起作用。