Question

您好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

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

感谢您的帮助!!!!

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上运行

2 个答案: