本文共 945 字，大约阅读时间需要 3 分钟。

语法：background-size: auto || <length> || <percentage> || cover || contain

取值说明：

1.auto:此值为默认值，保持背景图片的原始高度和宽度

2.<length>此值设置具体的值，可以改变背景图片的大小

3.<percentage>此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置的百分值将使背景图片的大小根据所在元素的宽度的百分比来计算

4.cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真

5.contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真

注：当background-size取值为和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同

实例：

随便找张图片(50px*50px)来当作背景图片使用

DEMO1:auto

我来看第一个DEMO,在前面的DEMO上加上和个class名为”backgroundSizeAuto”,在这个Demo上我们应用上前面所示的背景，并把background-size取值为auto

DEMO2:length

DEMO3:percentage

DEMO4:cover

DEMO5:contain

DEＭＯ三中的cover是把背景图片放大到适合元素容器的尺寸，这时的contain刚好是跟cover相反，是把背景图片缩小到适合元素容器的尺寸

总结：从上面的几个DEMO效果可以看出，只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形夫真，所以大家使用时需要仔细考虑好，以免给你的制作带来不良效果