CSS Background

http://www.runoob.com/css/css-background.html

http://www.w3school.com.cn/css/css_background.asp

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

CSS 屬性定義背景效果:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

背景顏色

background-color 屬性定義了元素的背景顏色.

CSS中，顏色值一般以如下方式定義:

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

body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

 

背景圖像

background-image 屬性描述了元素的背景圖像.

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

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

 

 

背景圖像 - 水平或垂直平鋪

默認狀況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

background-repeat:repeat-x;    //只在橫軸方向重複

background-repeat:repeat-y;    //只在縱軸方向重複

background-repeat:repeat;       //默認的應該是這個，橫軸和縱軸方向都進行重複

background-repeat:no-repeat;   //不重複

background-repeat:space;          //橫軸和縱軸方向都重複，可是圖片重複的時候，會加空格。最後造成網狀的效果

 

背景圖像- 設置定位與不平鋪

background-repeat:no-repeat;
background-position:right top;

 

背景- 簡寫屬性

爲了簡化這些屬性的代碼，咱們能夠將這些屬性合併在同一個屬性中.

背景顏色的簡寫屬性爲 "background":

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

當使用簡寫屬性時，屬性值的順序爲：:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上屬性無需所有使用，你能夠按照頁面的實際須要使用.

 

如何設置固定的背景圖像

background-attachment:fixed;