CSS background 相關屬性入門指南：新手必讀

Published October 22, 2024 by 徐培鈞
CSS

在網頁設計中，背景的設置是不可或缺的部分。

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

  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-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 屬性的用法，讓你在設計網頁背景時，更加得心應手！