background-size中，contain、cover、100%的区别

语法:

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

值	描述
length	设置背景图像的高度和宽度; 第一个值设置宽度，第二个值设置高度;如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度；第一个值设置宽度，第二个值设置高度；如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

关于100%、cover、contain：

1. 都是通过图片缩放来适应整个容器；

2. background-size: 100% 100%; —— 不保持图片长宽比例(会导致变形)，按容器比例撑满；

3. background-size: cover; —— 图片比例不变，把背景图片放大到适合元素容器的尺寸，超出容器的部分可能会裁掉；

4. background-size: contain; —— 按照图片某一边来覆盖显示区域的，会有白边；

5. background-size: 100%; != background-size: 100% 100%; 第一种写法实际是100% auto，也就是图片的宽度拉伸到和盒子宽度一样100%，纵轴根据图片原有比例去变化。而第二种参考第三条。

w3school测试地址：

【建议F12增加背景颜色background-color: red;看的会更加直观】

https://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=7