background-size属性100%和cover的区别

background-size属性100%和cover的区别

background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真（建UI给原始背景图，否则容易出现图片拉伸后失真）

background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像

background-size: length | percentage | cover | contain

(1)length

该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

(2)percentage

该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

(3)cover

背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

(4)contain

把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。