CSS属性：background-size

background-size属性用于指定背景图像的大小。

背景图像可以被设置为覆盖该元素的整个背景区域，或者被设置为由CSS作者所定义的明确的尺寸大小。

可以使用 cover关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例，那么该图像的高度和宽度的固有比率将被保留。

一些<image>s 有固有的尺寸和比例，如 JPEG 图像，例如,其他图像如<gradient>s 已经没有任何固有的尺寸和比例，除非指定其他的值(请参阅下面的值),占用该元素的背景区域的大小。背景图像的最终呈现的大小取决于图像是否具有固有的尺寸和比例。

background-size属性采用关键字值 (cover或contain) 或一对非关键字值 ( | )，或一个非关键字值,值为auto。例如:

background-size: cover; /* keyword value */
background-size: contain; /* keyword value */
background-size: 100% 50%; /* pair of non-keyword values */
background-size: 300px 200px; /* pair of non-keyword values */
background-size: 50% auto; /* non-keyword value + the value 'auto' */

至于两个值，第一个值指定图像的宽度,第二个值指定图像的高度。

如果只指定了一个非关键字值，另一个则被认为是auto.

background-size属性还可以以逗号分隔值，以便当元素具有多个背景图像时，每个值应用于相应的背景图像 (第一个值对应第一个图像，第二个值对应第二个图像，等等)。

在下面这个交互式的演示案例中，单击不同的background-size值，观察背景呈现的改变:

笔记

结合CSS渐变(gradients),background-size属性可以创建有趣并具有创意的背景模式。你可以在lea Verou写的CSS3图案中阅读所有模式。

官方语法

语法

background-size: <bg-size> [ , <bg-size> ]*

/* where */

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

默认值:auto
应用场景:所有元素
动画支持:YES，不包括关键字值

属性值

`<length>`

<length>值将在指定的方向上缩放背景图像。这里不允许指定负值。

`<percentage>`

percentage值将图像背景在指定的背景区域内缩放为指定的百分比大小，这里背景指定区域由background-origin属性值决定。除非background-origin属性的值由作者设置，它具有padding-box属性值，这就意味着，背景图像的定位是相对于其中心在padding box的左上角的背景坐标系统。这里不允许使用负百分比值。

`contain`

缩放图像，同时保持其固有纵横比 (如果存在的话)，到其最大的值，使其宽度和高度可以充斥其背景指定区域。如果背景图像有没有固有的比例和维度，然后它将呈现背景指定区域的大小。

`cover`

缩放图像，同时保持其固有纵横比 (如果存在的话)，到最小的大小，这样它的宽度和高度可以完全覆盖背景指定区域。如果背景图像没有固有的比例和维度，然后它将呈现背景指定区域的大小。

`auto`

使用auto关键字，在相应方向缩放背景图像，这样保持其固有的比例。

如果图像有两个固有的尺寸 (高度和宽度)，它将呈现它本身的大小。
如果背景图像没有固有的比例和维度，然后它将以背景指定区域的大小呈现。
如果图像没有比例，但是存在维度，它的呈现好像contain就被指定一样。
如果有一个固有的尺寸和一个比例，他将按照其尺寸和比例呈现。
如果图像有一个固有的维度，但没有比例，它将按照其固有维度和对应背景指定区域的维度呈现。

注意事项

如果background-size属性的值是对值，其中一个值是auto，另一个值是<length>或<percentage>则:

如果图像具有固有比例: 使用length/percentage值在相应的维度中指定呈现图像的大小，然后使用图像的比例来计算其他维度的值。所以，例如，第一个值是length,第二值为auto，然后图像呈现的的宽度将按照其指定的length，图像的高度将基于图像的比例。
如果图像没有固有的比例: 使用length/percentage值在相应的维度中指定呈现图像的大小。对于另一个方向 (其中值为auto)，浏览器将使用图像的尺寸，当然前提是，存在的情况下。例如，一个 JPEG 图像有两个固有维度 (高度和宽度)，所以如果高度设置为一个length值，宽度设置为auto，浏览器将从图像中提取的宽度，并使用它，因为它有一个这个值。但是如果图像不具有固有的宽度 (例如 gradient(渐变))，浏览器也将呈现同一维度作为背景指定区域。

background-size属性也可以通过inherit值，继承其父元素的值。例如:background-size: inherit.

案例

以下是所有有关background-size属性的有效语法。

/* keyword value syntax */
background-size: cover;
background-size: contain;

/* two-value syntax: first value specifies 
the width of the image and the second value 
specifies its height */
background-size: 50% auto;
background-size: 50px 30px;
background-size: 10em 12em;

/* one-value syntax: the second value is always 
assumed to be 'auto' */
background-size: 32em;
background-size: auto;
background-size: 100%;

以下是用background-size属性指定大小背景图像的所有实例。在此示例中的图像被假设为固有的尺寸和比例 (JPEG 图像，例如);

/* stretch the image to fill the background area ignoring image ratio */
background-size: 100% 100%; 

/* the background image is shown at its intrinsic size */
background-size: auto; /* default */

/*  the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio */
background-size: 3em; /* second value is assumed `auto` */

/* this one forces the background image to be 15px by 15px */
background-size: 15px 15px;

下面的示例有关图像拉伸的 (注意background-repeat属性和background-origin属性的值)。纵横比被保留了。

background-size: 50% auto;
background-repeat: repeat;
background-origin: border-box;

下面的示例指定两个背景图像的背景大小。第一个值指定第一个图像大小，第二个值指定第二个图像的大小。

background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
background-size: 100% 100%, contain;

下面的示例将强迫渐变图像的大小改变为100px x 100px。

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

在线示例

更改以下演示中的background-size属性的值，观察背景图像的呈现是如何改变的。

请您在更改值的同时，调整屏幕的大小，观察背景图像如何响应该元素的大小。

浏览器支持

扩展阅读

本文根据@Sara Soueidan的《CSS Reference: background-size》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://tympanus.net/codrops/css_reference/background-size/。