浅谈background-size

语法：

background-size: length|percentage|cover|contain;

length ：设置背景图片高度和宽度。
percentage：将计算相对于背景定位区域的百分比。
cover： 保持图像的纵横比，并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain：保持图像的纵横比，并将图像缩放成将适合背景定位区域的最大大小。

1. length

参数为具体的数值，第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto。
例如：

background-size: 200px;

在500x300的容器中设置前后的效果如下（图片原大小为800x530）：

2. percentage

参数为百分比，主要相对于容器的大小。
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto。

例如：

background-size: 90% 80%; // 在本例500*300的容器里，等同于background-size: 450px 240px;

效果如下：

3.cover

cover参数能保证图片永远按比例撑满容器
效果如下：

4.contain

contain 参数能保证图片永远能完整显示在容器中

5.多个背景图缩放，用逗号隔开

例如：

background-image: url(https://s2.ax1x.com/2020/02/13/1LF8iD.jpg), url(https://s2.ax1x.com/2020/02/13/1Llfg0.jpg);
background-size: 250px 150px, 90% 80%;

注：图片声明越靠前，显示的层级越靠前。

实例：https://codepen.io/jianxiujiu...