CSS---background屬性及其屬性值

CSS屬性：

background-color/*背景顏色*/
background-image/*背景圖片*/
background-repeat/*設置背景圖像是否重複，及如何重複*/
background-attachment/*背景圖像是否固定或者隨着頁面的其餘部分滾動*/
background-position/*設置背景圖像的起始位置*/
background/*簡寫屬性*/

1、background-color：

顏色值通常以以下方式定義：

十六進制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
顏色名稱 - 如：“red”

h1 {background-color:#ff0000;}
p {background-color:rgb(255,0,0);}
div {background-color:red;}

2、background-image:

默認情況下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體.

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

提示：可以設置一種背景顏色，這樣的話，假如背景圖像不可用，可以使用背景色帶代替。

body {
background-image:url('background.jpg');
background-color:#ffffff;
}

3、background-repeat：

常用屬性：

repeat：背景圖像將向垂直和水平方向重複。這是默認
repeat-x:只有水平位置會重複背景圖像
repeat-y:只有垂直位置會重複背景圖像
no-repeat:背景圖像不會重複

例：

body
{
background-image:url('background.jpg');
background-repeat:repeat-y;
}

4、background-position：

left top:左上
left center：左中
left bottom：左下
right top：右上
right center：右中
right bottom：右下
center top：居中置頂
center center：水平垂直居中
center bottom：居中置底
以上這些屬性值，只寫一個時，另一個默認爲center
x% y%：x是水平位置，y是垂直。左上角是0％0％。右下角是100％100％。
xpos ypos:x是水平位置，y是垂直。左上角是0。單位可以是像素（0px0px）或任何其他 CSS單位
以上兩個屬性值，只寫一個時，另一個爲50%

注意：使用該屬性，background-attachment必須設置爲 “fixed（固定）”.

body
{ 
	background-image:url('background.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}

4、background-attachment：

scroll: 背景圖片隨頁面的其餘部分滾動。這是默認
fixed:背景圖像是固定的

body 
{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}

5、background簡寫屬性

當使用簡寫屬性時，屬性值的順序爲：:
1.background-color
2.background-image
3. background-repeat
4. background-attachment
5. background-position
以上屬性無需全部使用，你可以按照頁面的實際需要使用.

body {background:#ffffff url('background.jpg') no-repeat right top;}