css - 固定的背景在安卓手机是不是动的，但是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; /* 标准的语法（必须放在最后） */
}

这篇关于css - 固定的背景在安卓手机是不是动的，但是IOS手机上却起不到固定的作用，是怎么回事呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！