首页 > 固定的背景在安卓手机是不是动的,但是IOS手机上却起不到固定的作用,是怎么回事呢?

固定的背景在安卓手机是不是动的,但是IOS手机上却起不到固定的作用,是怎么回事呢?

body{
        background: url(../img/Invitation_bg.png);
        background-repeat:no-repeat;
        background-attachment:fixed;
        -webkit-background-repeat:no-repeat;
        -o-background-repeat:no-repeat;
        -moz-background-repeat:no-repeat;
        -ms-background-repeat:no-repeat;
        -webkit-background-attachment:fixed;
        -o-background-attachment:fixed;
        -moz-background-attachment:fixed;
        -ms-background-attachment:fixed;

    }

这个背景在安卓手机上是不会动的。
在IOS手机上却固定不了,请问是怎么回事


原因是 “fixed” 在 IOS 手机上使用时,fixed失效,是IOS手机浏览器的一个BUG。

折中的一个方法,将渐变背景的图片改成css渐变背景,然后纵向拉伸。这样写,这个背景不就不存在切图图片在滚动动时,背景也在滚动的情况:

body {
    background: -webkit-linear-gradient(#F6C6CE, #D08989); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#F6C6CE, #D08989); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#F6C6CE, #D08989); /* Firefox 3.6 - 15 */
    background: linear-gradient(#F6C6CE, #D08989) repeat-y; /* 标准的语法(必须放在最后) */
}

就算用background: url(../img/Invitation_bg.png) no-repeat fixed;;这样类似的。IOS还是不支持。有什么办法能解决吗? 客户要求必须是全屏幕大图片。内容滑动,背景图全屏不动。


怎么写了这么多,background: url(../img/Invitation_bg.png) no-repeat fixed;

【热门文章】
【热门文章】