CSS Background(背景)

CSS背景屬性用于定義元素的背景樣式。CSS 背景這里指通過(guò)CSS對(duì)對(duì)象設(shè)置背景屬性，如通過(guò)CSS設(shè)置背景各種樣式。

背景屬性

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

背景顏色

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

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

body {background-color: #f0e68c;}

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

• 十六進(jìn)制值-例如“#ff0000”

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

• 顏色名稱(chēng)-如“紅色”

查看CSS顏色名稱(chēng)以獲取可能顏色名稱(chēng)的完整列表。

背景圖像

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

請(qǐng)參見(jiàn)下面的示例，該示例演示如何設(shè)置頁(yè)面的背景圖像。

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

背景重復(fù)

默認(rèn)情況下，該background-image屬性在水平和垂直方向上都重復(fù)圖像。

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

請(qǐng)參見(jiàn)下面的示例，該示例演示了如何通過(guò)水平重復(fù)切片的圖像來(lái)設(shè)置網(wǎng)頁(yè)的漸變背景。

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

背景附件

background-attachment屬性確定背景圖像相對(duì)于視口是固定的還是隨包含塊一起滾動(dòng)。

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

背景位置

background-position屬性用于控制背景圖像的位置。

如果未background-position指定，則圖像將放置在元素的默認(rèn)左上位置，即(0,0)。請(qǐng)參閱以下示例：

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;
    }

背景屬性速記

從上面的示例中可以看到，處理背景時(shí)需要考慮許多屬性。也可以在一個(gè)屬性中指定所有這些屬性，以縮短代碼。這稱(chēng)為速記屬性。

的background屬性是用于設(shè)置所有單獨(dú)的背景屬性（即，縮寫(xiě)屬性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;
    }

使用速記符號(hào)，上面的示例可以寫(xiě)成：

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

使用background簡(jiǎn)寫(xiě)屬性時(shí)，屬性值的順序應(yīng)為。

背景：彩色 圖像 重復(fù) 附屬 位置 ;

如果使用速記符號(hào)時(shí)缺少或未指定單個(gè)背景屬性的值，則將使用該屬性的默認(rèn)值（如果有）。