背景图像不适用于 iPhone/iPad

Question

您好，我的 background-image 在 Apple 设备上有问题 (iPhone/iPad) 我的背景在所有浏览器和 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

我已经尝试了 "Questions that may already have my answer" 的一些解决方案，但对我来说没有任何效果

感谢您的帮助！！！

Answer 1

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

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

如果有人给我带来另一个让我开心的解决方案

谢谢

Answer 2

我建议在以下设置中使用 Stellar.Js...

HTML（附加到相关的div）

data-stellar-background-ratio="0.5"

CSS

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

JS

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

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

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

希望对您有所帮助！

背景图像不适用于 iPhone/iPad

Background-image not working on iPhone/iPad

html

css

iphone

background-image

ios