背景

CSS Podcast - 053:背景

背景

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

背景圖層與使用者最遠距離,是從方塊內容的 padding-box 區域開始,顯示在方塊內容後方。如此一來,背景圖層就不會與任何框線重疊。

背景顏色

瀏覽器支援

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

資料來源

如要套用至背景圖層,最簡單的效果之一就是設定顏色background-color 的初始值為 transparent,能夠顯示父項的內容。背景圖層上的有效色彩設定位於該元素上繪製的其他物體後方。

背景圖片

瀏覽器支援

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

資料來源

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

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

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

CSS 漸層背景

提供多種漸層 CSS 函式,可讓您在傳送兩種以上的顏色時產生背景圖片。

無論使用何種漸層函式,產生的圖片都會「自動調整大小」,以符合可用空間大小。

展示如何使用漸層函式套用背景圖片的範例:

重複顯示背景圖片

瀏覽器支援

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

資料來源

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

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

  • repeat:圖片會在可用空間中重複顯示,並視需要裁剪。
  • round:圖片會以水平和垂直方向重複出現,以符合可用空間中的執行個體數量。可用空間會增加圖片延展,並在圖片原始寬度的一半延展後壓縮,以便新增更多圖像例項。
  • space:圖片會以水平和垂直方向重複出現,以符合可用空間中更多的例項大小,而不裁剪至圖片的例項,因此請視需要略過圖片例項。重複的圖片會接觸到背景圖層佔用的空間,且圖片之間需均有空白空間。

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

如果只使用一個值,該值就會同時套用至水平和垂直重複項目。

此外,這項精簡版本也提供便利的單字選項,可讓您更清楚地掌握您的意圖。

repeat-x 只會橫向重複圖片;相當於 repeat no-repeat

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

背景位置

瀏覽器支援

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

資料來源

您可能已經注意到,網路上的部分圖片如果套用 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% 套用至背景圖片,背景圖片距離底部 20%,距離 CSS 方塊右側 30%。

以下示範此行為:

以下列舉更多搭配 CSS 和關鍵字值使用 background-position 屬性的範例:

背景大小

瀏覽器支援

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

資料來源

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

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

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

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

第二種方法為單獨使用,無需其他參數。

以下示範關鍵字的實際應用方式:

示範如何將這些關鍵字套用至background-size

背景附件

瀏覽器支援

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

資料來源

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

可接受 3 個關鍵字:scrollfixedlocal

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

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

一旦原本使用的背景圖片空間必須在螢幕外捲動 (或算繪) 到畫面外,背景圖層中的圖片就會固定在原始位置,保持顯示,直到整個圖層隨著可視區域捲動離開畫面為止。

local 關鍵字可讓背景圖片的位置根據元素內容進行固定。背景圖片現在會沿著佔用的空間移動,因為這些空間會在 CSS 方塊內外顯示 (通常是因為捲動、2D 或 3D 轉換)。

背景來源

瀏覽器支援

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

資料來源

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

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

背景片段

瀏覽器支援

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

資料來源

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

background-origin 一樣,可以指定的區域為 border-boxpadding-boxcontent-box,以及 CSS 背景圖層可顯示位置的對應位置。使用這類關鍵字時,系統會裁剪或裁剪超出指定區域範圍的背景。

background-clip 屬性也接受 text 關鍵字,分割背景不超過內容方塊內文字的範圍。為了在 CSS 方塊內的實際文字中清楚顯示這項效果,文字必須部分或完全透明。

在本文撰寫期間,Chrome 和大部分瀏覽器都必須加上 -webkit- 前置字元,才能使用這項屬性。

瀏覽器支援

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

資料來源

,瞭解如何調查及移除這項存取權。

多種背景

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

從上到下會定義多種背景;第一個背景對使用者距離最近的背景,最後一個背景則與使用者離得最遠。

瀏覽器只會指定第一個定義的背景或最後一個圖層。只有這個圖層可以指派 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 方塊的左上角。

正確!
視內建大小而定,圖片可能不會顯示在 CSS 方塊的左上角,你必須明確使用 background-position 來變更背景圖片的預設位置。

根據預設,背景圖片不會重複播放。

必須明確使用 background-repeat: no-repeat,才能避免重複的背景圖片。此外,background-repeat: repeat-xbackground-repeat: repeat-y 可用來避免特定軸重複。
正確!

以下哪些 background-position 宣告有效?

background-position: 50% left
搭配關鍵字使用 CSS 值時,這些值的順序很重要。
background-position: top right 33%
這會將背景圖片置於方塊頂端,距離方塊右側邊緣 33% 處。
background-position: right bottom
這會將背景圖片放置於方塊的最右側和底部。不同軸的位置可按任何順序命名。
background-position: left
這會將背景圖片放在方塊最左側,並垂直置中。如果只提供軸的一個位置,背景圖片會朝著相反軸的中心點。

如何將背景圖片設為固定在您使用的可視區域中:

background-position: fixed
「這是 background-position 屬性的值無效。」
background-fixed-to-viewport: true
CSS 中沒有「background-fixed-to-viewport」,
background-attachment: fixed
background-attachment: fixed 會明確將背景圖片設為在目前可視區域內的固定。
background-attachment: scroll
background-attachment」屬性可用來設定在可視區域中固定的背景圖片。然而,scroll 是屬性的預設值,預設會在方塊內內容不會影響方塊內修正背景圖片。

CSS 方塊中的背景預設背景來源為:

content-box
background-origin 的有效值,但不是預設值。
border-box
background-origin 的有效值,且預先安排的邊框可依背景繪製,但並非預設值。
padding-box
background-origin 的預設值。允許背景顯示超出內容範圍,且範圍延伸至方塊邊框。
margin-box
雖然 CSS 方塊的公認區域是無效的 background-origin 屬性值,