首页 > 建站教程 > CSS3+HTML5 >  解决background-attachment: fixed在IOS下不起作用正文

解决background-attachment: fixed在IOS下不起作用

解决background-attachment: fixed在IOS下不起作用


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;
}