背景

CSS Podcast - 053：背景

背景

每個 CSS 方塊後面是特殊層，稱為「背景圖層」。CSS 供應商提供多種方式，以便進行有意義的變更，包括允許使用多種背景。

背景圖層最靠近使用者的位置，從其 padding-box 區域開始顯示在方塊內容後方。這樣一來，背景圖層就完全不會與框線重疊。

背景顏色

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

背景圖片

在 background-color 圖層之上，您可以使用 background-image 屬性新增背景圖片。background-image 接受下列屬性：

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

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

CSS 漸層背景

有數種漸層 CSS 函式，可讓您在傳遞兩種以上顏色時產生背景圖片。

無論使用何種漸層函式，產生的圖片都會固定大小，以符合可用空間大小。

示範使用漸層函式套用背景圖片的範例：

重複背景圖片

根據預設，背景圖片會水平和垂直重複顯示，填滿背景圖層的整個空間。

如要變更，請使用 background-repeat 屬性和下列其中一個值：

• repeat：圖片會在可用空間內重複顯示，並視需要裁剪。
• round：圖片會橫向和直向重複顯示，以符合可用空間的大小。如果可用空間會增加圖片，並且拉長圖片原始寬度的一半，請先壓縮以新增更多圖片例項。
• space：圖片會以水平和垂直方式重複顯示，以符合可用空間中執行個體 (不會裁剪) 的數目，並視需要保持圖片例項的間距。重複圖片會觸碰背景圖層佔用的空間，並以空格平均分配。

background-repeat 屬性可讓您單獨設定 x 和 Y 軸的行為。第一個參數會設定水平重複行為，第二個參數則設定垂直重複行為。

如果使用單一值，此值會同時套用到水平和垂直的重複值。

簡而言之，也可以使用便利的單字詞選項，讓意圖更加清楚。

repeat-x 值只會水平重複圖片；相當於 repeat no-repeat。

以下示範將展示 background-repeat 屬性的這些功能：

背景位置

您可能已經注意到，當網路上的部分圖片套用 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;

  background-position: left right;

background-position 屬性也有便利的單個值；省略的值會解析為 50%。以下範例說明如何使用 background-position 屬性接受的關鍵字：

除了預設的雙參數格式和一個參數形式之外，background-position 屬性也最多接受四個參數。

使用三個或四個參數時，CSS 長度或百分比前面必須加上 top、left、right 或 bottom 關鍵字，瀏覽器才能計算偏移量的來源 CSS 方塊邊緣。

使用三個參數時，CSS 長度或值可以是第二個或第三個參數，另一個是關鍵字；系統會使用成功的關鍵字決定 CSS 長度或值與偏移值對應的邊緣。指定的其他關鍵字的偏移值設為 0。

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

如果將 background-position: top left 20% 套用至 CSS 背景圖片，圖片就會放在方塊頂端，20% 值代表與方塊左側 (x 軸) 的偏移 20%。

如果將 background-position: top 20% left 套用至 CSS 背景圖片，20% 值代表與 CSS 方塊頂端 (Y 軸) 頂部的偏移 20%，且圖片會放在方塊左側。

Google 使用四個參數時，會將兩個關鍵字與兩個值配對，對應至您所指定的每個關鍵字起點的偏移量。如果將 background-position: bottom 20% right 30% 套用至背景圖片，則背景圖片的位置會距離底部 20%，以及 CSS 方塊右側 30% 的位置。

以下示範將示範這個行為：

以下舉例說明如何結合 CSS 和關鍵字值來使用 background-position 屬性：

背景大小

background-size 屬性可設定背景圖片的大小。根據預設，背景圖片會根據圖片本身的 (實際) 寬度、高度和顯示比例調整大小。

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

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

• auto：單獨使用時，系統會根據背景的寬度和高度調整背景圖片大小；如果將 auto 與寬度 (第一個參數) 或高度 (第二個參數) 的其他 CSS 值搭配使用，設為 auto 的維度會視需要調整大小，維持圖片的自然顯示比例。這是 background-size 屬性的預設行為。
• cover：遮蓋背景圖層的整個區域。這可能表示圖片已拉長或裁剪。
• contain：調整圖片大小，填滿整個空間，不延展或裁剪。因此，除非將 background-repeat 設為 no-repeat，否則空白空間可以保留圖片重複顯示的情形。

第二種是在沒有其他參數的情況下，單獨使用。

以下示範關鍵字的實際運作情形：

示範將這些關鍵字套用至 background-size 的示範：

背景附件

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

可接受 3 個關鍵字：scroll、fixed 和 local。

background-attachment 屬性的預設行為是 scroll 的初始值。如果需要更多空間，圖片會在背景圖層中隨著該空間移動 (視 CSS 方塊的邊界決定)。

使用 fixed 值可將背景圖片的位置修正為可視區域。

背景圖層圖片最初需要捲動 (或轉譯) 螢幕外部後，背景圖層中的圖片會保持固定在背景位置，因為這些圖片得以在可視區域將整個圖層捲動至畫面外為止。

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

背景來源

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

請嘗試透過以下示範嘗試這些選項：

背景片段

background-clip 屬性可控制背景圖層所看到的內容，無論 background-origin 屬性建立的範圍為何。

與 background-origin 一樣，可以指定的區域都是對應至 CSS 背景圖層算繪位置的 border-box、padding-box 和 content-box。使用這些關鍵字時，系統會將背景畫面比指定區域進一步的顯示圖像裁切或裁切。

background-clip 屬性也接受 text 關鍵字，該關鍵字會剪輯背景，不能比內容方塊中文字的還要長。為了在 CSS 方塊的實際文字中顯而易見，文字必須部分或完全透明。

在本文撰寫時，Chrome 和多數瀏覽器會要求使用 -webkit- 前置字元，才能使用相對的新屬性。

多個背景

如 本單元開頭所說，背景圖層允許定義多個子圖層。為求精簡，我會將這些子圖層稱為背景。

多個背景由上到下定義；第一個背景最接近使用者，最後一個背景則與使用者最遠。

唯一定義的背景或最後一個圖層是由瀏覽器指定「最終背景圖層」。只有這個圖層可以指派 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 背景的相關知識