CSS-背景大小 | 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

屬性設定的背景顔色。此外，如果背景圖檔設定了透明或者半透明屬性，襯在背景圖檔後面的背景色也會顯示出來。

初始值	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		3.6		10.0	4.1
SVG image as background	44.0		8.0		31.0	?

	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
	2.3	(Yes)		1.0 -moz- 49 -webkit- 4.0

1. 基于WebKit的浏覽器最初實作了較舊的

background-size

草案，其中省略的第二個值被視為複制第一個值; 本草案不包含

contain

cover

關鍵字。

2. Opera 9.5對背景定位區域的計算對于固定背景是不正确的。Opera 9.5還将雙值形式解釋為水準縮放因子，并從外觀上将垂直剪切次元解釋為水準縮放因子。這已在Opera 10中修複。

另見

• 縮放背景圖像（Scaling background images）

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