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% 偏移,圖片會放在方塊的左側。
如果使用四個參數,兩個關鍵字會與兩個值配對,兩者則對應每個關鍵字起點的偏移值。如果將 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
一樣,可以指定的區域為 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: top right 33%
background-position: left
background-position: right bottom
background-position: 50% left
如何將背景圖片設為固定在您使用的可視區域中:
background-attachment: scroll
background-fixed-to-viewport: true
background-position: fixed
background-attachment: fixed
CSS 方塊中的背景預設背景來源為:
content-box
margin-box
border-box
padding-box