【问题标题】: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 上创建视差效果或禁用视差效果的替代解决方案

Read more on parallax effect with background-attachment

Alternative solution provided by Callum Findlay

【讨论】:

  • 我刚刚对 Callum Findlay 解决方案进行了测试。它在 iOS 上的 Safari 13 中不起作用。
猜你喜欢
  • 2020-12-29
  • 2015-12-02
  • 2021-02-26
  • 2021-01-17
  • 1970-01-01
  • 1970-01-01
  • 2014-09-08
  • 1970-01-01
  • 2010-11-25
相关资源
最近更新 更多