background-attachment: fixed的效果非常不错,当背景设置了这个属性,内容滚动时,背景定位在那里不动,有点视差效果的感觉。但是,此方法在IOS下无效:
body { background-image: url('../img/background.png'); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
上面的background-attachment: fixed在安卓手机下完美,但是在IOS手机下,滑动内容,发现背景跟着一起滑动,完全不起作用。此时,可以使用下面的方法来达到类似的效果,至于body的背景则不需要了:
body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-image: url('../img/background.png'); background-position: center; background-size: cover; background-repeat: no-repeat; }