背景

每個 CSS 方塊後方都有一個稱為背景層的專屬層。CSS 提供多種方式,可對其進行有意義的變更,包括允許多個背景。

背景圖層距離使用者最遠,會從方塊的 padding-box 區域開始,在方塊內容後方算繪。這樣一來,背景圖層就不會與邊框重疊。

背景顏色

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您可以設定顏色,這是套用至背景圖層最簡單的效果之一。background-color 的初始值為 transparent,可讓父項的內容顯示。背景圖層上的有效顏色集會位於該元素上繪製的其他內容後方。

背景圖片

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您可以在 background-color 圖層上方使用 background-image 屬性新增背景圖片。background-image 接受下列項目:

  • 使用 url CSS 函式設定的圖片網址或 資料 URI
  • 由漸層 CSS 函式動態建立的圖片。

使用 url CSS 函式設定背景圖片

CSS 漸層背景

您可以使用多個 漸層 CSS 函式,在傳遞兩種或更多顏色時產生背景圖片。

無論使用哪個漸層函式,產生的圖片都會根據可用空間大小調整

以下是使用漸層函式套用背景圖片的示範:

重複背景圖片

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

根據預設,背景圖片會以水平和垂直方式重複,以便填滿背景圖層的整個空間。

如要變更這個值,請使用 background-repeat 屬性搭配下列其中一個值:

  • repeat:圖片會重複顯示在可用空間內,並視需要裁剪。
  • round:圖片會以水平和垂直方式重複,以便在可用空間中放入盡可能多的例項。隨著可用空間增加,圖片會延展,並在延展圖片一半的原始寬度後,壓縮以便新增更多圖片例項。
  • space:圖片會以水平和垂直方式重複,以便在可用空間內放入盡可能多的例項,且不會裁剪圖片,並視需要調整圖片例項的間距。重複圖片與背景圖層佔用的空間邊緣相接,兩者之間均勻分布白色空間。

您可以使用 background-repeat 屬性,分別設定 X 軸和 Y 軸的行為。第一個參數會設定水平重複行為,第二個參數則會設定垂直重複行為。

如果您使用單一值,系統會將該值套用至水平和垂直重複項目。

縮寫語法也提供方便的單字選項,可讓您更清楚表達意圖。

repeat-x 只會水平重複圖片,這與 repeat no-repeat 相同。

以下示範會顯示 background-repeat 屬性的這些功能:

背景位置

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您可能已經注意到,當網路上的某些圖片使用 background-repeat: no-repeat 宣告設定樣式時,這些圖片會顯示在容器的左上方。

背景圖片的初始位置為左上方。您可以使用 background-position 屬性,藉由偏移圖片位置來變更這項行為。

background-repeat 一樣,background-position 屬性可讓您在 X 軸和 Y 軸上獨立設定圖片位置,預設值為兩個值。

使用 CSS 長度和百分比時,第一個參數會對應到水平軸,第二個參數則對應到垂直軸。

只使用關鍵字時,關鍵字的順序不重要:

正確做法
background-position: left 50%;
正確做法
background-position: top left;
正確做法
background-position: left top;

關鍵字與不同位置軸相關聯時,不必在意先後順序。

錯誤做法
  background-position: 50% left;

當 CSS 值與關鍵字搭配使用時,順序就很重要。第一個值代表水平軸,第二個值代表垂直軸。

錯誤做法
  background-position: left right;

您無法同時使用與同一軸相關聯的關鍵字。

background-position 屬性也有方便的單值速記法;省略的值會解析為 50%。以下範例說明如何使用 background-position 屬性接受的關鍵字:

除了預設的兩個參數和一個參數外,background-position 屬性也最多可接受四個參數。

使用三個或四個參數時,CSS 長度或百分比前必須加上 topleftrightbottom 關鍵字,瀏覽器才能計算出 CSS 方塊的哪個邊緣應為偏移起點。

使用三個參數時,CSS 長度或值可以是第二或第三個參數,其他兩個則為關鍵字;成功的關鍵字會用來判斷 CSS 長度或值對應的邊緣是偏移量。指定的其他關鍵字偏移值設為 0。

正確做法
background-position: bottom 88% right;
正確做法
background-position: right bottom 88%;
錯誤做法
background-position: 88% bottom right;
使用三個或更多參數時,CSS 長度值前必須加上 toprightbottomleft 關鍵字。
正確做法
background-position: bottom 88% right 33%;
正確做法
background-position: right 33% bottom 88%;
錯誤做法
background-position: 88% 33% bottom left;
使用三個或更多參數時,CSS 長度值前必須加上 toprightbottomleft 關鍵字。

如果 background-position: top left 20% 套用至 CSS 背景圖片,圖片會置於方塊頂端,20% 值代表從方塊左側 (x 軸) 偏移 20%。

如果 background-position: top 20% left 套用至 CSS 背景圖片,20% 的值代表從 CSS 方塊頂端 (在 y 軸上) 偏移 20%,且圖片會置於方塊左側。

使用四個參數時,兩個關鍵字會與兩個值配對,這些值對應於每個指定關鍵字的來源偏移量。如果 background-position: bottom 20% right 30% 套用至 background-image,background-image 會位於 CSS 方塊的右側 30% 處,距離底部 20%。

以下示範說明這項行為:

以下是更多使用 background-position 屬性的範例,其中混合了 CSS 和關鍵字值:

背景大小

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

background-size 屬性可設定背景圖片的大小;根據預設,背景圖片的大小會根據其內在 (實際) 寬度、高度和顯示比例設定。

background-size 屬性會使用 CSS 長度和百分比值或特定關鍵字。這個屬性最多可接受兩個參數,可讓您分別變更背景的寬度和高度。

background-size 屬性可接受下列關鍵字:

  • auto:當背景圖片單獨使用時,系統會根據其內在的寬度和高度調整大小;當 auto 與其他 CSS 值一同用於寬度 (第一個參數) 或高度 (第二個參數) 時,系統會根據需要調整設為 auto 的尺寸,以維持圖片的自然顯示比例。這是 background-size 屬性的預設行為。
  • cover:涵蓋背景圖層的整個區域。這可能表示圖片已縮放或裁剪。
  • contain:將圖片調整為填滿空間的大小,但不延展或裁剪圖片。因此,除非 background-repeat 設為 no-repeat,否則可能會出現空白空間,導致圖片重複顯示。

後兩者應以獨立方式使用,不需其他參數。

以下示範會顯示這些關鍵字:

以下是將這些關鍵字套用至 background-size 的示範:

背景附件

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

background-attachment 屬性可讓您在背景圖層顯示在螢幕上時,修改背景圖片 (背景圖層的圖片部分) 的固定位置行為。

可接受 3 個關鍵字:scrollfixedlocal

background-attachment 屬性的預設行為是 scroll 的初始值。當需要更多空間時,圖片會隨著 CSS 方塊邊界所決定的背景層內的空間移動。

使用 fixed 值可將背景圖片的位置固定在檢視區。

當背景圖層圖片原本所占用的空間需要捲動 (或算繪) 至畫面外時,背景圖層內的圖片會維持在背景圖層啟用時的原本位置,直到整個圖層都被檢視區捲動至畫面外為止。

local 關鍵字可讓背景圖片的位置相對於元素內容固定。背景圖片現在會沿著所佔據的空間移動,因為該空間會在 CSS 方塊的邊界內和外顯示 (通常是因為捲動、2D 或 3D 轉換)。

背景來源

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

background-origin 屬性可讓您修改與特定方塊相關聯的背景區域。屬性可接受的值對應至方塊的 border-boxpadding-boxcontent-box 區域。

請使用下列示範來試用這些選項:

背景短片

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

background-clip 屬性會控制背景圖層的視覺內容,不受 background-origin 屬性建立的邊界影響。

background-origin 一樣,可指定的區域是 border-boxpadding-boxcontent-box,對應至可轉譯 CSS 背景層的區域。使用這些關鍵字時,如果背景的算繪範圍超出指定區域,系統會裁剪或修剪該區域。

background-clip 屬性也接受 text 關鍵字,可將背景裁剪至不超過內容方塊內文字的範圍。如要在 CSS 方塊內的實際文字中顯示這項效果,文字必須部分或完全透明。

這是相對較新的屬性,在撰寫本文時,Chrome 和大多數瀏覽器都需要使用 -webkit- 前置詞才能使用這個屬性。

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

多個背景

如模組開頭所述,背景層可定義多個子層。為簡化說明,我會將這些子圖層稱為背景。

多個背景會從上到下定義;第一個背景是最靠近使用者的背景,而最後一個背景則是最遠的背景。

瀏覽器會將唯一定義的背景或最後一個圖層指定為最終背景圖層。只有這個圖層可以指派 background-color

您可以使用逗號分隔的大部分背景相關 CSS 屬性,個別設定多個圖層,如以下程式碼片段和即時示範所示。

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

背景縮寫

為讓您更輕鬆地為方塊的背景層設定樣式 (尤其是在需要多個背景層時),我們提供以下特定模式的速寫法:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

在宣告多個背景的簡寫形式中,順序非常重要。您必須提供位置和大小值,並以斜線 (/) 分隔。如要以正確順序宣告來源和剪輯行為,您可以同時設定適用於兩者的有效關鍵字

下列宣告會裁剪背景,並從內容方塊產生背景:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

考量這些簡寫語義,先前程式碼片段的背景相關宣告可改寫為以下內容:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

進行隨堂測驗

測驗 CSS 背景知識

背景圖片會位於 CSS 方塊的左上方。

背景圖片會重複顯示。

以下何者是有效的 background-position 宣告?

background-position: left
background-position: 50% left
background-position: right bottom
background-position: top right 33%

如要將背景圖片設為固定在檢視區內,請使用:

background-fixed-to-viewport: true
background-attachment: scroll
background-position: fixed
background-attachment: fixed

CSS 方塊中背景的預設 background-origin 為:

border-box
margin-box
content-box
padding-box