css background 多张背景图单列展示

应用场景：在移动端登录页设置背景图的时候，如果使用单张大图做背景，那么在网络不好的情况下图片会加载比较慢，图片是从上到下加载的，会看到下面的图片是白屏。视觉效果不好。所以把单张大图切成4张小图，可以加载得快一点。

实现效果：

.login-wrapper {
    position: relative;
    background: url('@/assets/loginMobile/bg1.png'), url('@/assets/loginMobile/bg2.png'), url('@/assets/loginMobile/bg3.png'), url('@/assets/loginMobile/bg4.png'); // 4张图片的URL
    background-repeat: no-repeat; // 图片不复制
    background-size: 100vw 25vh, 100vw 25vh, 100vw 25vh, 100vw 25vh;  // 设置每张图片的大小，宽度100%，高度占父元素的25%
    background-position: 0vw 0vh, 0vw 25vh, 0vw 50vh, 0vw 75vh; // 每张图的定位
    min-height: 100vh; // 设置父元素高度占满屏
}

注意：
切背景图的时候，最好把每张图的高度切成相等的。如果大图高度不能等分，那就前几张小图的高度相等，多的高度都匀给最后一张图。这样方便设置background-positio的值，给小图定位（每张小图的Y轴定位是有规律的）。

如果设置background-size时，不想给图片的高度定死，可以设置宽100vw，高度auto。