CSS Background(背景)

CSS背景屬性用于定義元素的背景樣式。CSS 背景這里指通過CSS對對象設置背景屬性，如通過CSS設置背景各種樣式。

背景屬性

CSS樣式為一個元素的背景提供若干屬性，如：background-color，background-image，background-repeat，background-attachment和background-position。下一節(jié)將介紹如何使用這些屬性為背景一一設置不同的樣式。

背景顏色

background-color屬性用于設置元素的背景色。

下面的示例演示如何設置網(wǎng)頁的背景色。

body {background-color: #f0e68c;}

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

• 十六進制值-例如“#ff0000”

• RGB值-例如“ rgb（255,0,0）”

• 顏色名稱-如“紅色”

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

背景圖像

background-image屬性將圖像設置為HTML元素的背景。

請參見下面的示例，該示例演示如何設置頁面的背景圖像。

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

背景重復

默認情況下，該background-image屬性在水平和垂直方向上都重復圖像。

通過使用background-repeat屬性，您可以控制如何在html元素的背景中平鋪背景圖像。您可以設置垂直（y軸），水平（x軸），雙向或雙向重復的背景圖像。

請參見下面的示例，該示例演示了如何通過水平重復切片的圖像來設置網(wǎng)頁的漸變背景。

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.jpg");
    background-repeat: no-repeat;
    }

在下面的示例中，背景圖像位于右上角，并且圖像的位置由background-position屬性指定。

body {
    background-image: url("tree.jpg");
    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簡寫屬性時，屬性值的順序應為。

背景：彩色 圖像 重復 附屬 位置 ;

如果使用速記符號時缺少或未指定單個背景屬性的值，則將使用該屬性的默認值（如果有）。