CSS 背景簡寫

CSS background - 簡寫屬性

如需縮短代碼，也可以在一個屬性中指定所有背景屬性。它被稱為簡寫屬性。

而不是這樣寫：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您能夠使用簡寫屬性 background：

實例

使用簡寫屬性在一條聲明中設置背景屬性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

親自試一試

在使用簡寫屬性時，屬性值的順序為：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

屬性值之一缺失并不要緊，只要按照此順序設置其他值即可。請注意，在上面的例子中，我們沒有使用 background-attachment 屬性，因為它沒有值。

所有 CSS 背景屬性

屬性 描述
background 在一條聲明中設置所有背景屬性的簡寫屬性。
background-attachment 設置背景圖像是固定的還是與頁面的其余部分一起滾動。
background-clip 規定背景的繪制區域。
background-color 設置元素的背景色。
background-image 設置元素的背景圖像。
background-origin 規定在何處放置背景圖像。
background-position 設置背景圖像的開始位置。
background-repeat 設置背景圖像是否及如何重復。
background-size 規定背景圖像的尺寸。