background-attchment移动端无效

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

想要实现一个移动端的页面，元素滚动，但是页面背景图不能滚动
能想到的就是使用“background-attachment: fixed”
但是在pc端是可以的，在移动端不适用

看了网上的很多列子
找到了一个使用body的方法，但是在ios中还是会跟随屏幕的滚动而滚动
所以就调整成下面，就适应了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//background-attachment固定背景图片手机端有效果只能放在body中
body{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
}
body:before{
  content: '';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../../../assets/bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%, cover, cover;
}