jquery - background-position 在 iphone 设备中不起作用。有解决这个问题的方法吗？

Question

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

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

这是我使用的 CSS:-

@media(最小宽度:315px)和(最大宽度:600px){ .home-横幅{ 背景图像:url(http://www.asdaniadventures.com/cmsasdani/image/data/banner/Banner.jpg)； 高度:100vh； 背景尺寸:封面； 背景位置:65% 0； 背景重复:不重复； }

Answer 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