javascript - 背景图像未显示在 iphone/平板电脑上

Question

我的背景图片没有显示在 iphone/平板电脑上!有趣的是，如果您使用笔记本电脑但将窗口大小设置为 iphone/平板电脑的大小，它仍然会显示(尝试调整网站大小)。

#intro {
background: url('imageurlhere') no-repeat right fixed;
background-color: #fdfdfd;
-webkit-background-size: 50% 125%;
-moz-background-size: auto 125%;
-o-background-size: auto 125%;
background-size: auto 125%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale')";
padding-top: 10%;
}

如果我取消“固定”参数，它会显示但视差会消失。

有什么办法可以解决这个问题吗？谢谢!

Answer 1

问题出在 position-y: fixed 的 convenience 属性上。

iOS 上的 Safari 无法识别已修复，因此它忽略了整个规则(请参阅随附的屏幕截图)。

删除:

background: url(http://i.imgur.com/CVJVeWw.jpg) no-repeat right fixed;

并改为添加:

background-repeat: no-repeat;
background-size: auto 125%;
background-position-x: right;
background-position-y: fixed;
background-image: url(http://i.imgur.com/CVJVeWw.jpg);

更新参见background-position-y 和background-attachment: fixed

我尝试了更多，看看是否能让它更好地为您服务。出于某种原因，当 background-attachment: fixed; 和 background-position-x: right; 在 iOS 6x 上指定时，背景会丢失。但是，通过将 background-attachment: fixed; 重置为 initial，尽管您确实失去了视差，但图像仍会显示。

所以:在桌面上试试这个:

#intro {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    background-image: url(http://i.imgur.com/rKJbwgL.jpg);
    background-color: #fdfdfd;
    -webkit-background-size: 110% 110%;
    -moz-background-size: auto 125%;
    -o-background-size: auto 125%;
    background-size: auto 110%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale')";
    padding-top: 10%;
    margin-right: -10%;
}

然后在手机/平板电脑的媒体查询中，重置背景附件:

background-attachment: initial;

如果这对您来说效果更好一些，请告诉我。