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

background-size取值

auto auto（默认值）
contain
cover
width height

contain

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

background-size: auto auto;

background-size: contain

优点：
保证背景图不被拉伸变形
保证背景图不被裁切

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

background-size: auto auto;

background-size: contain;

cover

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

background-size: auto auto;

background-size: cover;

优点：
保证背景图不被拉伸变形
保证背景图占满元素

缺点：
如果背景图与元素比例和元素不一致，背景图会被裁切。

background-size: auto auto;

background-size: cover

width height

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

background-size: auto auto;

background-size: 100% 100%;

background-size: 50% 50%;

优点：
可以让背景图占满元素

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

background-size: auto auto;

background-size: 100% 100%;

contain和cover的差异

如果图片的比例和元素的比例一致，两者看不出差异，但如果比例不一致，contain会出现图片覆盖不全的情况，而cover会出现剪切图片内容的情况。