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 用來控制背景圖片在元素中的顯示位置。

你可以使用關鍵字(如 topcenterbottom 等)或使用具體的數值來設置位置。

基本語法

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 元素,設置其背景有兩個部分:

  1. 使用一個重複的小圖案作為背景紋理,讓它不斷重複填充。
  2. 在此背景上疊加一個圖標,並固定在右上角。

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-repeatpattern.png 圖片會在整個元素中重複,創建背景紋理效果;icon.png 則不會重複,只顯示一次。
  • background-sizepattern.png 使用自動大小(保持其原始大小),而 icon.png 被設置為 50×50 像素。
  • background-attachmentpattern.png 會隨著滾動而移動(scroll),而 icon.png 則固定不動(fixed),無論滾動到哪裡,它始終固定在右上角。

結果

這樣,我們就能夠在同一個 div 元素上設置兩個背景圖片:

  • 一個是作為背景紋理的重複圖片。
  • 另一個是右上角的圖標,隨著頁面滾動而保持固定。

預覽效果

在預覽中,你會看到一個區塊,其背景有一個重複的小紋理,並且右上角固定了一個小圖標,無論頁面滾動到哪裡,圖標都保持不變。


結論

CSS 的 background 屬性及其相關屬性提供了強大的工具來設置網頁元素的背景。

無論是簡單的背景顏色,還是複雜的背景圖片及其位置控制,這些屬性都能幫助你輕鬆達成效果。

希望這篇文章能幫助你,快速掌握 background 屬性的用法,讓你在設計網頁背景時,更加得心應手!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *