.login {
background: url(img/login.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;//当页面的其余部分滚动时,背景图像不会移动。
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
问题一:
![QQ图片20200228120623.png](/img/bVbDTJ4)
因为background-attachment:fixed属性在移动端不兼容,就出现了在手机端显示的时候背景图不展开的情况。
问题二:
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
有定位的时候,在PC端当列表内容超过屏幕高度时,列表无法下拉。
整体来说,上面的写法对PC端、移动端都不是很友好。
所以我搜了一个更好的写法,在背景前添加了一个伪类,即兼容性移动端,也没有列表无法滚动的问题。
.login:before {
content: "";
background: url(img/login.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}