css 背景图全屏显示，兼容移动端

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