background屬性用法詳解

background屬性是一個複合屬性，它主要包括四個比較常用的屬性，當然還有其他屬性，因為不常用，這裡就不做介紹了。

常用的五個屬性分別是:

[CSS] 純文字檢視 複製程式碼
background-color: 規定背景顏色。
background-image: 規定背景圖片。
background-repeat: 規定背景圖片是否可以重複。
background-position: 規定元素背景圖片的位置。

一.background-color:

此屬性用於設定背景顏色，只要屬性值是合法的顏色值即可。例如:

[CSS] 純文字檢視 複製程式碼
background-color:red;

二.background-image:

此屬性可以規定一張指定的圖片作為物件的背景。例如:

[CSS] 純文字檢視 複製程式碼
background-image:url("Images/mytest.jpg");

裡面的圖片路徑是相對於程式碼所在樣式表相對路徑。路徑也可以不加雙引號:

[CSS] 純文字檢視 複製程式碼
background-image:url(Images/mytest.jpg);

此屬性可以和background-color一同使用，如果背景圖片不能夠覆蓋的地方可以由背景色填充。

三.background-repeat:

屬性用以規定背景圖片是否重複，它具有以下屬性值:

[CSS] 純文字檢視 複製程式碼
background-repeat: repeat; /* 預設值，在水平和垂直方向上同時重複背景圖片*/
background-repeat: no-repeat; /* 不重複背景圖片*/
background-repeat: repeat-x; /* 背景圖片水平方向重複 */
background-repeat: repeat-y; /* 背景圖片垂直方向重複*/
background-repeat: inherit; /* 繼承父元素的background-repeat屬性*/

四.background-position: