background这个属性相信大家再熟悉不过了，可是当你碰到桌布/地板类的背景图片的时候我们应该怎样优雅的解决背景图片的大小问题呢？
什么是桌布、地板类图片？
看看你家的地板，家里没有地板的看下你家的桌布，你家没有桌布？考虑换个新家了[二哈][二哈]
我个人觉得其实就是可以由若干张不同的小图案按照有规律的堆叠形成的一张大图的一类图片
假如UI切你了一张图告诉你需要把一个页面的背景做成这种的，然后你先别慌，我们先观察一下 这张图不就是符合我们上面桌布、地板类图片吗？
其实拆分开就是下面它们两个
前提知识点
background-color: 设置背景颜色
background-size: 设置背景尺寸
background-position: 改变图像在背景中的位置
background-image: 设置背景图片
background-repeat: 设置背景的平铺
- 首先我们可以通过background-repeat属性background-color和background-size属性实现多张图片的堆叠类似于下面这种设置了，我这里直接简写了这三个属性
position relative
overflow hidden
width 100vw
height 100vh
background url('1.png') repeat #FAF2F4
background-size 20vw 20vw // 为了一排能够排满5个
直接放到background后面了
position relative
overflow hidden
width 100vw
height 100vh
background url('1.png') repeat, url('2.png') repeat #FAF2F4 // 多张图片之间用","分隔开
background-size 20vw 20vw // 为了一排能够排满5个
这个时候你会发现两张图片重叠了
background-position发挥威力了，我们上面把background-size设置为20vw 20vw,就是把背景图片宽高设置为20vw,让其自由平铺，我们想要实现我们最初的那种效果我们需要把第二张图url('2.png')的位置做一个错开的调整
position relative
overflow hidden
width 100vw
height 100vh
background url('1.png') repeat, url('2.png') top 10vw left 10vw repeat #FAF2F4 // 这里top和left设置为10vw也就是background-size的一半就可以完美实现错开的效果
background-size 20vw 20vw // 为了一排能够排满5个
最终成果38kb 减少到 3kb 小朋友你是否有很多问号？
按照上面的方法 赶快提升你的页面加载速度吧
