iphone 不支持具有正确分辨率的 HTML Div 背景图像的解决方案是什么？

如何解决iphone 不支持具有正确分辨率的 HTML Div 背景图像的解决方案是什么？

我有一个网页，我想为其添加视差效果。所以我创建了一个 div 并将图像设置为 div 背景。没关系，问题是 iPhone 在打开网页时没有以正确的分辨率显示此图像，但 android 设备支持此功能。

这是html部分

<div class="banner" data-z-index="1">

        <!--contact number div-->
        <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-5  col-xl-5 phoneBox" id="number" data-z-index="2">
            <p  class=" phoneno">[phone]/ [phone]</p>
        </div>


        <h1 class="erahome faded">Welcome to Era Homes ...</h1>

        <h4 class="life faded">"Space for life"</h4>

        <h3 class="year faded">Since 2012</h4>

    </div>
 

这是css部分

.banner{
background: url('images/back.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
width:100%;
height:444px;
margin-top: -2px;
                

}

如何像在其他设备中一样在 iphone 中显示此背景图像？

解决方法

这是 iOS 的一个已知问题，其中 background-position: fixed 不起作用。

this 也列出了。

我过去遇到过类似的问题，我使用上传的代码解决了这个问题 到我的 github 存储库：Can I Use

以下是 Github Pages 上托管的工作示例：iOS Background Hack

基本上我所做的是添加一个带有 div 的 position: fixed，带有 top: 0 和 left: 0 用所需的 viewport 和 background-image 占据整个 z-index: -1 和添加了一个 body 以便它位于页面的所有其他元素下方，而不是 background，我添加了一个 sections 来交替 sections 以便图像可见在没有 background 的 false 中具有视差效果。