background-size的基础用法和不同值之间的差异

background-size主要的值主要有3类，分别是：

• contain
• cover
• width height

contain

背景图会在保证自己不被拉伸变形的前提下，来所缩放自身，完整的显示背景图。

优点：

• 保证背景图不被拉伸变形
• 保证背景图不被裁切

缺点：

• 如果背景图比例与元素不一致，就会出现背景图无法完整覆盖元素的情况

cover

背景图会在保证自己不被拉伸变形的前提下，缩放自身，来占满容器

优点：

• 保证背景图不被拉伸变形
• 保证背景图占满元素

缺点：

• 如果背景图与元素比例和元素不一致，背景图会被裁切

width height

尺寸完全由数值控制，可以使用各种单位，比如百分比（注意：如果只指定了widht，height会默认为auto）

优点：

• 可以让背景图占满元素

缺点：

• 背景图比例与元素不一致的话，会导致图片拉伸变形

对比图