/

CSS 背景

CSS 背景

學習如何使用 CSS 更改元素背景

可以使用多個 CSS 屬性來更改元素的背景：

  • background-color 背景顏色
  • background-image 背景圖像
  • background-clip 背景區域
  • background-position 背景位置
  • background-origin 背景原點
  • background-repeat 背景重複
  • background-attachment 背景附著
  • background-size 背景大小

還有一個縮寫屬性 background，可以縮短定義並將它們分組在一行。

background-color 接受顏色值，可以是顏色關鍵字，也可以是 rgb 或 hsl 值：

1
2
3
4
5
6
7
p {
 background-color: yellow;
}

div {
 background-color: #333;
}

除了使用顏色，你還可以使用圖像作為元素的背景，指定圖像位置的 URL：

1
2
3
div {
 background-image: url(image.png);
}

background-clip 可讓你決定背景圖片或顏色的區域。默認值為 border-box，該值延伸到邊框外緣。

其他值包括：

  • padding-box：將背景延伸到填充邊緣，不包括邊框。
  • content-box：將背景延伸到內容邊緣，不包括填充。
  • inherit：應用父元素的值。

當使用圖像作為背景時，你需要使用 background-position 屬性來設置圖像的放置位置。left、right、center 都是 X 軸的有效值，top、bottom 是 Y 軸的有效值：

1
2
3
div {
 background-position: top right;
}

如果圖像比背景小，則需要使用 background-repeat 屬性設置行為。它應該在所有軸上重複 repeat-x、repeat-y，或者在所有軸上上重複 repeat？後者是默認值。還有一個值 no-repeat。

background-origin 讓你選擇背景應該應用的位置：

  • 使用 padding-box 在整個元素中，包括填充。
  • 使用 border-box 在整個元素中，包括邊框。
  • 使用 content-box 在元素中，不包括填充。

使用 background-attachment 可將背景附着到視窗，這樣滾動內容時不會影響背景：

1
2
3
div {
 background-attachment: fixed;
}

默認值是 scroll。還有另一個值 local。可以通過這個 Codepen 範例更好地了解它們的行為。

最後一個背景屬性是 background-size。我們可以使用 3 個關鍵字：auto、cover 和 contain。 auto 是默認值。

cover 會展開圖像，直到整個元素都被背景覆蓋。

contain 在一個維度（x 或 y）覆蓋圖像的整個最小邊緣時停止展開，因此它完全包含在元素中。

還可以指定一個長度值，如果這樣做，則設置背景圖像的寬度（高度會自動定義）：

1
2
3
div {
 background-size: 100%;
}

如果指定 2 個值，一個是寬度，另一個是高度：

1
2
3
div {
 background-size: 800px 600px;
}

縮寫屬性 background 可以縮短定義並將其分組在一行。

以下是一個例子：

1
2
3
div {
 background: url(bg.png) top left no-repeat;
}

如果使用圖像，並且圖像無法加載，可以設置替代顏色：

1
2
3
div {
 background: url(image.png) yellow;
}

還可以將漸變設置為背景：

1
2
3
div {
 background: linear-gradient(#fff, #333);
}

tags: [“css”, “backgrounds”, “web development”]