关于CSS3的background-size的总结

    以前不是很理解这个background-size，最近学习了一下，做一下总结，如果有不对的地方还希望大家多多指教!
    好，废话不多说，咱直接开始。

接下来是针对background-size多种变换效果的展示与说明；

    如图一所示，当background-size为两个参数的时候，第一个参数对应图片的宽，第二个对应图片的高，如果说使用像素，直接对应图片的压缩后的宽高，即将图片的宽高进行强制变化，就类似于WPS图片的修改尺寸功能，如果是使用百分号，那么，背景图片所对应的宽高就是所加背景图片的盒子的宽高乘以对应的百分比；
    如图二所示，当background-size为一个参数并且是百分比或者像素（本质上来说，百分比就是像素），那么就表示背景图片的宽度被钉死，高度按照比例缩放，拿上图为例，图片盒子宽度为50%300px（盒子大小：300px300px），即150px,由于原图片的宽高比为1:1，故而图片的高度也是150px，这个就类似于微信小程序里面的widthFix属性了；
    如图三所示，这个属性可以理解成，将图片放到基准起始点（因为没有设置background-position，默认图片将出现在（0,0）的位置），然后将从左上角向右下键等比例拉伸，直到图片的宽或者高接触到边界位置；
    如图四所示，这个属性和background-size差不多，可以理解成将图片从基准起始点等比例地像右下角拉伸，直到图片的长宽都接触边界，如果图片比例不是1:1的话，那么会继续将图片像外拉伸，直到，后接触盒子边界的宽或者高接触边界，然后裁剪掉多余的部分。