CSS Podcast - 053: Background
每個 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%,且圖片會置於方塊左側。
使用四個參數時,兩個關鍵字會與兩個值配對,這些值對應於每個指定關鍵字的來源偏移量。如果 background-position: bottom 20% right 30%
套用至 background-image,background-image 會位於 CSS 方塊的右側 30% 處,距離底部 20%。
以下示範說明這項行為:
以下是更多使用 background-position
屬性的範例,其中混合了 CSS 和關鍵字值:
背景大小
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
一樣,可指定的區域是 border-box
、padding-box
和 content-box
,對應至可轉譯 CSS 背景層的區域。使用這些關鍵字時,如果背景的算繪範圍超出指定區域,系統會裁剪或修剪該區域。
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 背景知識
背景圖片會位於 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