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

Posted 2023-05-08

【中文标题】背景位置在 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

您好，看看这个应该会回答您的查询***.com/questions/3183467/…

【参考方案1】：

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

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

Read more on parallax effect with background-attachment

Alternative solution provided by Callum Findlay

【讨论】：

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