background-size

試一試

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/hand.jpg");
  min-width: 100%;
  min-height: 100%;
}

沒有被背景圖片覆蓋的空間會由 background-color 屬性填充，並且當背景圖片具有透明/半透明特性時，背景顏色將透過圖片顯示出來。

語法

/* 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: revert;
background-size: revert-layer;
background-size: unset;

background-size 屬性可以透過以下幾種方式之一來指定：

• 使用關鍵字值 contain 或 cover。
• 僅使用一個寬度值，此時高度值預設為 auto。
• 同時使用寬度和高度值，此時第一個值設定寬度，第二個值設定高度。每個值都可以是 <length>、<percentage> 或 auto。

要為多個背景圖片指定尺寸，請用逗號分隔每個圖片對應的值。

值

contain

在不裁剪或拉伸圖片的前提下，將圖片縮放到容器內儘可能大的尺寸。如果容器比圖片大，這會導致圖片平鋪，除非 background-repeat 屬性被設定為 no-repeat。

cover

將圖片（同時保持其比例）縮放到能完全覆蓋容器的最小尺寸（即：其高度和寬度都完全覆蓋容器），不留任何空白區域。如果背景圖片的比例與元素的比例不同，圖片將會被垂直或水平裁剪。

auto

在相應的方向上縮放背景圖片，以保持其固有的比例。

<length>

在相應的維度上將圖片拉伸到指定的長度。不允許使用負值。

<percentage>

在相應的維度上將圖片拉伸到背景定位區域的指定百分比。背景定位區域由 background-origin 的值決定（預設為內邊距框）。但是，如果背景的 background-attachment 值為 fixed，則定位區域為整個視口。不允許使用負值。

固有尺寸和比例

值的計算取決於圖片的固有尺寸（寬度和高度）和固有比例（寬高比）。這些屬性如下：

• 點陣圖圖片（如 JPG）總是有固有的尺寸和比例。
• 向量圖片（如 SVG）不一定有固有尺寸。如果它同時具有水平和垂直的固有尺寸，那麼它也具有固有比例。如果它沒有尺寸或只有一個尺寸，它可能有也可能沒有比例。
• CSS <gradient>（漸變）沒有固有尺寸或固有比例。
• 使用 element() 函式建立的背景圖片使用生成元素的固有尺寸和比例。

基於固有尺寸和比例，背景圖片的渲染尺寸計算如下：

• 如果 background-size 的兩個分量都被指定且不為 auto： 背景圖片將按指定的尺寸渲染。

• 如果 background-size 是 contain 或 cover： 在保持其固有比例的同時，圖片會以包含在背景定位區域內或覆蓋背景定位區域的最大尺寸進行渲染。如果圖片沒有固有比例，則會以背景定位區域的尺寸進行渲染。

• 如果 background-size 是 auto 或 auto auto

  • 如果圖片同時具有水平和垂直的固有尺寸，它將按該尺寸渲染。
  • 如果圖片沒有固有尺寸也沒有固有比例，它將按背景定位區域的尺寸渲染。
  • 如果圖片沒有固有尺寸但有固有比例，它的渲染方式就好像指定了 contain 一樣。
  • 如果圖片只有一個固有尺寸且有固有比例，它將按該單一尺寸渲染。另一個尺寸將使用指定的尺寸和固有比例計算得出。
  • 如果圖片只有一個固有尺寸但沒有固有比例，它將使用指定的尺寸和背景定位區域的另一個維度進行渲染。

  備註： SVG 圖片有一個 preserveAspectRatio 屬性，其預設值等同於 contain；顯式指定 background-size 會導致 preserveAspectRatio 被忽略。

• 如果 background-size 有一個 auto 分量和一個非 auto 分量

  • 如果圖片有固有比例，它將被拉伸到指定的尺寸。未指定的尺寸將使用指定的尺寸和固有比例計算得出。
  • 如果圖片沒有固有比例，它將被拉伸到指定的尺寸。未指定的尺寸將使用圖片相應的固有尺寸（如果存在）計算得出。如果沒有這樣的固有尺寸，它將成為背景定位區域的相應尺寸。

正式定義

正式語法

background-size = 
  <bg-size>#  

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

<length-percentage> = 
  <length>      |
  <percentage>  

示例

平鋪大圖

讓我們來看一張大圖，一張 2982x2808 的 Firefox 標誌圖片。我們想在一個 300x300 畫素的元素中平鋪這張圖片的四個副本。為此，我們可以使用一個固定的 background-size 值，即 150 畫素。

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

結果

更多示例請參見調整背景圖片大小。

規範

瀏覽器相容性

另見

• 調整背景圖片大小
• 縮放 SVG 背景
• object-fit