移动端添加背景图,让背景图不跟随内容而滚动
body{
width:100%;
height:auto;
background:url('1.png') no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
background-attachment:fixed ; 固定背景图,不随内容滚动
scroll: 跟随内容滚动
这样写完,问题就出来了,有个别安卓,和ios 不支持,这个属性
此时要做兼容
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(path/to/image) center 0 no-repeat;
background-size: cover;
}
这样就可以了,
背景图的大小,也要做兼容处理
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
如果在背景图上加容器颜色,要使用background:rgba()属性才可以显示背景图,而且要加background-size属性