CSS 背景

CSS 背景屬性用於定義元素的背景樣式。

背景屬性

CSS 樣式為一個元素的背景提供若干屬性，如： background-color 、background-image、 background-repeat 、background-attachment 和 background-position 。以下部分將介紹如何使用這些屬性逐個設定背景的不同樣式。

背景顏色

background-color 屬性用於設定元素的背景顏色。

下面的示例演示瞭如何設定網頁的背景顏色。

body {
    background-color: #f0e68c;
}

CSS 中的顏色通常由以下方法指定：

• 一個十六進位制值 - 比如 #ff0000
• RGB 值 - 如 rgb(255,0,0)
• 顏色名稱 - 如 red

檢視 CSS 顏色名稱 以獲取可能顏色名稱的完整列表。

背景圖片

background-image 屬性將影象設定為 HTML 元素的背景。

請參閱下面的示例，該示例演示如何設定頁面的背景影象。

body {
    background-image: url("leaf.jpg");
}

背景重複

預設情況下， background-image 屬性會水平和垂直重複影象。

通過使用 background-repeat 屬性，你可以控制背景影象在 html 元素的背景中的平鋪方式。你可以設定背景影象垂直（y 軸），水平（x 軸），兩個方向或兩個方向重複。

請參閱下面的示例，該示例演示如何通過水平重複切片影象來設定網頁的漸變背景。

body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

背景附屬

background-attachment 屬性確定背景影象是相對於視區固定還是與包含塊一起滾動。

body {
    width: 250px;
    height: 200px;
    overflow: scroll;
    background-image: url("recycle.jpg");
    background-attachment: fixed;
}

背景位置

background-position 屬性用於控制背景影象的位置。

如果 background-position 未指定，則將影象放置在元素的預設左上角位置，即 (0,0) 。請參閱以下示例：

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
}

在以下示例中，背景影象位於右上角，影象的位置由 background-position 屬性指定。

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: 100% top;
}

背景速記屬性

從上面的示例中可以看出，在處理背景時需要考慮許多屬性。也可以在一個屬性中指定所有這些屬性，以縮短程式碼。這被稱為速記屬性。

background 屬性是用於設定所有單獨的背景屬性的縮寫屬性（即 background-color、background-image、background-repeat、background-attachment 和 background-position）

body {
    background-color: #f0e68c;
    background-image: url("smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

使用簡寫表示法，上面的例子可以寫成：

body {
    background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;
}

使用 background 速記屬性時，屬性值的順序應為。

background: color image repeat attachment position;

如果在使用簡寫表示法時缺少或未指定單個背景屬性的值，則將使用該屬性的預設值（如果有）。

注意： 背景屬性不會繼承，但預設情況下，父元素的背景將是可見的，因為 CSS background 屬性的初始 transparent 值（即預設值）。