background-size CSS属性指定一个元素的背景图像的大小。图像可以保留其自然大小，拉伸到一个新的大小，或约束，以适应可用空间，同时保持其固有的比例。
/* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Multiple backgrounds */ background-size: auto, auto; /* Not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Global values */ background-size: inherit; background-size: initial; background-size: unset;
注意：没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。
|
初始值 |
auto auto |
|---|---|
|
适用元素 |
all elements. It also applies to ::first-letter and ::first-line. |
|
是否是继承属性 |
no |
|
Percentages |
relative to the background positioning area |
|
适用媒体 |
visual |
|
计算值 |
as specified, but with relative lengths converted into absolute lengths |
|
Animation type |
repeatable list of simple list of length, percentage, or calc |
|
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
background-size属性通过以下方式之一进行指定：
- 使用关键字值
contain或cover。
- 仅使用宽度值，在这种情况下，高度默认为
auto。
- 使用宽度和高度值，在这种情况下，第一个设置宽度，第二个设置高度。每个值可以是一个
<length>，一个<percentage>或者auto。
要指定多个背景图像的大小，请用逗号分隔每个背景图像的值。
值
contain缩放图像尽可能大，而不裁剪或拉伸图像。cover尽可能大的缩放图像而不拉伸图像。如果图像的比例与元素的比例不同，则会垂直或水平裁剪，因此不会留下空白空间。auto在相应的方向上缩放背景图像，以保持其固有的比例。<length>将相应尺寸的图像拉伸到指定的长度。负值是不允许的。<percentage>将相应尺寸的图像拉伸至背景定位区域的指定百分比。背景定位区域由background-origin（默认为填充框）的值确定。但是，如果背景的background-attachment值是fixed，定位区域是整个视口。负值是不允许的。
内在尺寸和比例
值的计算取决于图像的固有尺寸（宽度和高度）和固有比例（宽高比）。这些属性如下：
- 位图图像（如JPG）总是具有固有的尺寸和比例。
- 矢量图像（如SVG）不一定具有固有尺寸。如果既具有横向和纵向的内在尺寸，也具有固有的比例。如果它没有尺寸或只有一个维度，它可能有或没有比例。
- CSS
<gradient>没有固有的尺寸或内在的比例。
- 使用
element()（元素（％29））函数创建的背景图像使用生成元素的固有尺寸和比例。
注意：<gradient>在Gecko 8.0（Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5）中，行为发生了变化。在此之前，他们被视为没有固有尺寸的图像，但与背景定位区域的固有比例相同。
注：在Gecko中，使用element()（元素（％29））函数创建的背景图像当前被视为元素尺寸的图像，或者元素为SVG的背景定位区域，对应的固有比例标准的行为。
基于内在尺寸和比例，背景图像的渲染大小计算如下：
如果两个分量background-size都是指定的而不是auto：背景图像以指定的大小呈现。如果background-size是contain或cover：在保留其固有比例的同时，图像以包含在背景定位区域内或覆盖背景定位区域的最大尺寸呈现。如果图像没有固有的比例，则以背景定位区域的大小渲染。如果background-size是auto或者auto auto：
- 如果图像同时具有水平和垂直的内在尺寸，则会以此尺寸进行渲染。
- 如果图像没有固有的尺寸，并且没有固有的比例，则会以背景定位区域的大小进行渲染。
- 如果图像没有固有的尺寸，但是具有固有的比例，则它被渲染，就好像
contain被指定了一样。
- 如果图像仅具有一个固有维度并且具有固有比例，则它以与该维度相对应的尺寸呈现。另一个维度是使用指定的维度和固有的比例来计算的。
- 如果图像只有一个固有尺寸但没有固有比例，则使用指定尺寸和背景定位区域的其他尺寸进行渲染。
注意： SVG图像有一个preserveAspectRatio默认的属性，相当于contain。在Firefox 43中，与Chrome 52相反，明确的background-size原因preserveAspectRatio被忽略。
如果background-size有一个auto组件和一个非auto组件：
- 如果图像具有固有的比例，则将其拉伸到指定的尺寸。未指定的维度是使用指定维度和固有比例计算的。
- 如果图像没有固有的比例，则将其拉伸到指定的尺寸。未指定的维度是使用图像的相应固有维度计算的，如果有的话。如果没有这样的固有尺寸，就成为背景定位区域的对应尺寸。
注意：对于缺乏内在尺寸或比例的矢量图像，背景大小尚未在所有浏览器中完全实现。要小心依赖上述行为，并在多个浏览器中测试以确保结果是可接受的。
正式语法
<bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain where <length-percentage> = <length> | <percentage>
示例
有关示例，请参阅缩放背景图像。
注
如果使用 <gradient>作为背景并指定background-size要使用它，最好不指定使用单个auto组件的大小，或仅使用宽度值（例如，background-size: 50%）指定大小。<gradient>在这种情况下，在Firefox 8中对s进行渲染已经改变了，而且目前在浏览器中通常是不一致的，并不是所有的渲染都完全按照CSS3 background-size规范和CSS3图像值渐变规范进行渲染。
.gradient-example { width: 50px; height: 100px; background-image: linear-gradient(blue, red); /* Not safe to use */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* Safe to use */ background-size: 25px 50px; background-size: 50% 50%; }
请注意，特别不建议将像素尺寸和auto尺寸与a一起使用<gradient>，因为无法在8之前的Firefox版本中复制渲染，并且在不实现Firefox 8的渲染的浏览器中，不知道其背景的元素的确切尺寸正在被指定。
规范
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Backgrounds and Borders Module Level 3The definition of 'background-size' in that specification. |
Candidate Recommendation |
Initial definition. |
浏览器兼容性
|
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
|
Basic Support |
1.0 -webkit- 1 3.01 |
12 |
3.6 -moz- 49 -webkit- 4.0 |
9.0 |
9.5 -o- 2 10 |
3.0 -webkit- 1 4.1 |
|
<contain> and <cover></cover></contain> |
3.0 |
12 |
3.6 |
9 |
10.0 |
4.1 |
|
SVG image as background |
44.0 |
12 |
8.0 |
9.0 |
31.0 |
? |
|
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
|---|---|---|---|---|---|---|---|
|
Basic Support |
2.3 |
(Yes) |
(Yes) |
1.0 -moz- 49 -webkit- 4.0 |
(Yes) |
(Yes) |
(Yes) |
|
<contain> and <cover></cover></contain> |
? |
? |
(Yes) |
(Yes) |
10.0 |
? |
(Yes) |
|
SVG image as background |
? |
? |
(Yes) |
8.0 |
? |
(Yes) |
? |
1. 基于WebKit的浏览器最初实现了较旧的background-size草案，其中省略的第二个值被视为复制第一个值; 本草案不包含contain或cover关键字。
2. Opera 9.5对背景定位区域的计算对于固定背景是不正确的。Opera 9.5还将双值形式解释为水平缩放因子，并从外观上将垂直剪切维度解释为水平缩放因子。这已在Opera 10中修复。
另见
- 缩放背景图像（Scaling background images）
- SVG背景的缩放（Scaling of SVG backgrounds）
