背景大小 | background-size

background-size

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属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

语法

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的渲染的浏览器中，不知道其背景的元素的确切尺寸正在被指定。

规范

浏览器兼容性

1. 基于WebKit的浏览器最初实现了较旧的background-size草案，其中省略的第二个值被视为复制第一个值; 本草案不包含contain或cover关键字。

2. Opera 9.5对背景定位区域的计算对于固定背景是不正确的。Opera 9.5还将双值形式解释为水平缩放因子，并从外观上将垂直剪切维度解释为水平缩放因子。这已在Opera 10中修复。

另见

• 缩放背景图像（Scaling background images）

• SVG背景的缩放（Scaling of SVG backgrounds）