背景图像在 iPhone/iPad 上不起作用答案

【问题标题】：Background-image not working on iPhone/iPad背景图像在 iPhone/iPad 上不起作用
【发布时间】：2016-05-18 15:57:01
【问题描述】：

您好，我在 Apple 设备 (iPhone/iPad) 上的 background-image 有问题我的背景在所有浏览器和 Android 设备上看起来都是我想要的，而不是在 Apple 设备上

在浏览器中是这样的：Safari、Firefox、Chrome、Opera、Edge、IE

像这样在 Android 上

在 Apple 设备上也是如此

对于 HTML，它只是一个普通的<div class="hero"> </div>

这是我的 CSS (sass)

.hero
    width: 100%
    height: 100%
    position: relative
    background:
        image: url(../image/pics/thailand.jpg)
        position: center
        size: cover
        attachment: fixed

This is the page

我已经尝试了“可能已经有我答案的问题”中的一些解决方案，但对我没有任何帮助

感谢您的帮助！！！！

【问题讨论】：

标签： html ios css iphone background-image

【解决方案1】：

我尝试了很多解决方案，但我不想使用 JS，所以由于某种原因，固定的属性附件在 IOS 上无法正常工作，所以我为媒体做了这个，现在图片看起来不错，只是不再固定了

 @media screen and(max-width:800px)
    .hero
        background:
            attachment: scroll

如果有人给我带来其他让我开心的解决方案

谢谢

【讨论】：

【解决方案2】：

我建议使用具有以下设置的 Stellar.Js...

HTML（附加到相关的 div）

data-stellar-background-ratio="0.5"

CSS

background-size: cover;
background-attachment: fixed;

$(window).stellar({ horizontalScrolling: false, responsive: true });

&如果您有任何空格或对齐问题，请尝试

$(window).stellar({ horizontalScrolling: false, responsive: true, verticalOffset: 50 });

希望这会有所帮助！

【讨论】：