CSS background 相關屬性入門指南:新手必讀
更新日期: 2024 年 10 月 22 日
在網頁設計中,背景的設置是不可或缺的部分。
CSS 提供了一組強大的 background
屬性,能夠幫助我們設置元素的背景顏色、圖片、位置、大小等。
這些屬性讓我們能夠創建豐富多樣的視覺效果。
本篇文章將詳細介紹與 background
相關的常用屬性,並通過範例幫助你掌握它們的用法。
background
屬性總覽
background
是一個可以設置背景屬性的簡寫屬性,它允許我們一次性定義多個與背景相關的屬性。
但在深入了解簡寫屬性之前,我們會逐一介紹每一個具體的背景屬性,讓你對它們有更清晰的認識。
以下是與 background
相關的主要屬性:
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-origin
background-clip
background-color
說明
background-color
用來設置元素的背景顏色。
你可以使用顏色名稱、十六進制值(如 #000000
)、RGB 值(如 rgb(0,0,0)
)或 HSL 值。
基本語法
element {
background-color: 顏色值;
}
範例
div {
background-color: lightblue;
}
在這個範例中,div
元素的背景會變為淺藍色。
延伸閱讀:初學者指南:CSS color 屬性
background-image
說明
background-image
屬性用來設置元素的背景圖片。
這個屬性可以讓你為元素設置任何圖片作為背景,並且支持多張圖片同時應用。
基本語法
element {
background-image: url('圖片路徑');
}
範例
div {
background-image: url('background.jpg');
}
在這裡,div
元素的背景會顯示 background.jpg
這張圖片。
設置多個背景圖片
div {
background-image: url('image1.jpg'), url('image2.png');
}
這樣可以在一個元素上應用多張背景圖片。
background-repeat
說明
background-repeat
屬性用來控制背景圖片是否重複。
如果你不希望圖片重複,可以將它設置為 no-repeat
。你還可以控制圖片在水平或垂直方向的重複。
基本語法
element {
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
}
範例
div {
background-image: url('pattern.png');
background-repeat: no-repeat;
}
這段程式碼會在 div
元素中顯示一張不重複的背景圖片。
repeat
:圖片在水平方向和垂直方向都重複(預設)。repeat-x
:圖片只在水平方向重複。repeat-y
:圖片只在垂直方向重複。no-repeat
:圖片不重複。
background-position
說明
background-position
用來控制背景圖片在元素中的顯示位置。
你可以使用關鍵字(如 top
、center
、bottom
等)或使用具體的數值來設置位置。
基本語法
element {
background-position: 位置值;
}
範例
div {
background-image: url('background.jpg');
background-position: center center;
}
這段程式碼會將背景圖片居中顯示。你也可以使用百分比或像素值來更精確地控制位置:
div {
background-position: 50% 50%;
}
補充說明:
在 background-position: 50% 50%;
中,這兩個百分比的意思是將背景圖片的參考點與容器的對應位置對齊。
具體來說,這裡的 百分比的分母是容器本身的寬度和高度。
- 第一個 50% 表示背景圖片的水平方向位置,對齊容器寬度的 50%(即容器的正中間)。
- 第二個 50% 表示背景圖片的垂直方向位置,對齊容器高度的 50%(即容器的垂直中間)。
換句話說,百分比是根據容器的寬度和高度來計算的。
當使用 50% 50%
時,背景圖片的中心點會與容器的中心點對齊。
如果使用其他的百分比值,比如 25% 75%
,則會將背景圖片的 25% 水平位置對齊容器寬度的 25%,並將背景圖片的 75% 垂直位置對齊容器高度的 75%。
範例
div {
background-image: url('background.jpg');
background-position: 50% 50%;
}
在這裡,背景圖片的中點會對齊到容器的中心。
如果容器寬 1000px,背景圖片的中點就會放在 500px 處;如果容器高 500px,背景圖片的中點就會放在 250px 處。
background-size
說明
background-size
屬性用來控制背景圖片的大小。
你可以設置圖片的具體尺寸,也可以使用一些預設值來自動調整圖片大小。
基本語法
element {
background-size: auto | cover | contain | [寬度] [高度];
}
auto
:保持圖片的原始尺寸(預設值)。cover
:縮放背景圖片,以完全覆蓋元素。contain
:縮放背景圖片,以完全適應元素的寬度或高度,並保持圖片的長寬比例。
範例
div {
background-image: url('background.jpg');
background-size: cover;
}
這會使背景圖片縮放以覆蓋整個元素。
background-attachment
說明
background-attachment
用來控制背景圖片是否隨著頁面滾動而移動。你可以選擇讓背景固定在頁面上,或者隨著滾動而移動。
基本語法
element {
background-attachment: scroll | fixed | local;
}
範例
div {
background-image: url('background.jpg');
background-attachment: fixed;
}
這段程式碼會將背景圖片固定在螢幕上,當頁面滾動時背景不會移動。
scroll
:背景圖片會隨著頁面滾動(預設)。fixed
:背景圖片固定在螢幕上,不會隨頁面滾動。local
:背景圖片會隨著元素的內容滾動。
background-origin
說明
background-origin
控制背景圖片的定位區域。
它決定背景圖片是相對於內容區域、內邊距區域還是邊框區域來定位。
基本語法
element {
background-origin: padding-box | border-box | content-box;
}
範例
div {
background-image: url('background.jpg');
background-origin: content-box;
}
padding-box
(預設):背景圖片相對於內邊距區域進行定位。border-box
:背景圖片相對於邊框區域進行定位。content-box
:背景圖片相對於內容區域進行定位。
background-clip
說明
background-clip
決定背景圖片繪製的範圍。
你可以選擇讓背景圖片只顯示在內容區域、內邊距區域或包含邊框的區域。
基本語法
element {
background-clip: border-box | padding-box | content-box;
}
範例
div {
background-image: url('background.jpg');
background-clip: padding-box;
}
這樣會讓背景圖片在內邊距區域內繪製,而不會顯示在邊框上。
background
簡寫屬性
說明
我們可以使用 background
這個簡寫屬性來同時設置所有的背景屬性。這是一個非常便利的方法,可以在一行內設置多個背景屬性。
基本語法
element {
background: [背景顏色] [背景圖片] [重複方式] [位置] [大小] [背景附著方式] [背景來源];
}
範例
div {
background: lightblue url('background.jpg') no-repeat center/cover fixed;
}
這段簡寫程式碼同時設置了背景顏色、背景圖片、背景重複方式、背景位置、背景大小以及背景是否固定。
案例:設置多張背景圖片的樣式
設置多張背景圖片是一個強大的功能,可以在同一個元素中同時使用多個背景圖片,並對每張圖片進行獨立的樣式控制。
這樣的應用可以用來實現疊加圖案、背景裝飾等效果。
範例需求
假設我們有一個 div
元素,設置其背景有兩個部分:
- 使用一個重複的小圖案作為背景紋理,讓它不斷重複填充。
- 在此背景上疊加一個圖標,並固定在右上角。
HTML 結構
<div class="background-example">
<p>多重背景圖片範例</p>
</div>
CSS 設置
.background-example {
width: 300px;
height: 300px;
background-image: url('pattern.png'), url('icon.png');
background-position: left top, right top;
background-repeat: repeat, no-repeat;
background-size: auto, 50px 50px;
background-attachment: scroll, fixed;
}
你可以使用 background
屬性的簡寫方式來合併這些屬性設置,從而使 CSS 更加簡潔。background
簡寫屬性允許我們一次性設定多個背景屬性,如圖片、位置、重複方式、大小、固定方式等。
CSS 設置|簡寫範例
.background-example {
width: 300px;
height: 300px;
background: url('pattern.png') left top repeat scroll,
url('icon.png') right top no-repeat fixed 50px 50px;
}
解釋
background-image
:這裡我們設置了兩張圖片。pattern.png
是一個小圖案,它會被設置為背景紋理,並且會不斷重複。icon.png
是一個圖標,我們希望它固定在右上角。background-position
:兩張圖片的顯示位置不同,pattern.png
設置在左上角並填充整個背景,而icon.png
被放置在右上角。background-repeat
:pattern.png
圖片會在整個元素中重複,創建背景紋理效果;icon.png
則不會重複,只顯示一次。background-size
:pattern.png
使用自動大小(保持其原始大小),而icon.png
被設置為 50×50 像素。background-attachment
:pattern.png
會隨著滾動而移動(scroll
),而icon.png
則固定不動(fixed
),無論滾動到哪裡,它始終固定在右上角。
結果
這樣,我們就能夠在同一個 div
元素上設置兩個背景圖片:
- 一個是作為背景紋理的重複圖片。
- 另一個是右上角的圖標,隨著頁面滾動而保持固定。
預覽效果
在預覽中,你會看到一個區塊,其背景有一個重複的小紋理,並且右上角固定了一個小圖標,無論頁面滾動到哪裡,圖標都保持不變。
結論
CSS 的 background
屬性及其相關屬性提供了強大的工具來設置網頁元素的背景。
無論是簡單的背景顏色,還是複雜的背景圖片及其位置控制,這些屬性都能幫助你輕鬆達成效果。
希望這篇文章能幫助你,快速掌握 background
屬性的用法,讓你在設計網頁背景時,更加得心應手!