background-size

介绍

background-size设置背景图片大小。图片可以保有原始尺寸，或者拉伸到新的尺寸，或者在保持宽高比的同时缩放到元素的可用空间的尺寸。

cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和contain值相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。
contain
缩放背景图片以完全装入背景区，可能背景区部分空白。contain尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color设置的背景颜色。
默认值 auto
以背景图片的比例缩放背景图片。
<length>
指定图片的固定大小。不能为负值。
<percentage>
指定图片相对背景区域的百分比。背景区域由background-origin设置，默认为 CSS 盒模型的内容区与内边距(padding-box)。不能为负值。

如果指定了background-size的两个值并且不是auto:
背景图片按指定大小渲染
contain或cover:
在保留宽高比的同时，尽可能铺满背景区。如果图像没有固定比例(例如gradient)，则忽略此属性，直接铺满整个背景区。
一个为auto另一个不是auto:
指定长度的纬度使用固定值大小，auto对应的纬度通过图像宽高比缩放。

样例：

background-size: contain;

background-size: 50%;
background-size: 3em;

background-size: auto 1em;
background-size: 50% 25%;

1
2
3
4
5
6
7

<bg-size> = [ <length-percentage> | auto ] {1, 2} | cover | contain

如果使用渐变色作为背景，并且对它使用了background-size，不要使用auto或者只指定一个宽度值。否则背景图的显示可能出现错误。