背景顏色 background-color
語法：
background-color：<color>
默認值：transparent 透明
適用於：所有元素
繼承性：無
動畫性：是
計算值：指定值
取值：
- <color>： 指定顏色。
說明：
設置或檢索對象的背景顏色。
- 當同時定義了背景顏色和背景圖像時，背景圖像覆蓋在背景顏色之上。
- 如果設置了 <' background-image '>，同時也建議設置 <' background-color '> 用於當背景圖像不可見時保持與文本顏色有一定的對比度。
- 對應的腳本特性為backgroundColor。
背景圖片 background-image
語法：
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
默認值：none
適用於：所有元素
繼承性：無
動畫性：否
計算值：指定值
取值：
- none： 無背景圖。
- <image>： 使用絕對或相對地址指或者創建漸變色來確定圖像。
說明：
設置或檢索對象的背景圖像。
- 如果設置了 <' background-image '>，同時也建議設置 <' background-color '> 用於當背景圖像不可見時保持與文本顏色有一定的對比度。
- 如果定義了多組背景圖，且背景圖之間有重疊，寫在前面的將會蓋在寫在后面的圖像之上。
- 對應的腳本特性為backgroundImage。
background-image : url(“http://static.criteo.net/flash/icon/nai_small.png”); // 全URL路徑
background-image : url(“/flash/icon/nai_small.png”); // 根路徑
background-image : url(“../nai_small.png”) ; // 相對於css文件的路徑
background-image : url(../nai_small.png) ; //不寫引號
background-image : url(‘../nai_small.png’) ; // 單引號
背景重復 background-repeat
語法：
background-repeat：<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}
默認值：repeat
適用於：所有元素
繼承性：無
動畫性：否
計算值：指定值
取值：
- repeat-x：背景圖像在橫向上平鋪
- repeat-y： 背景圖像在縱向上平鋪
- repeat： 背景圖像在橫向和縱向平鋪
- no-repeat： 背景圖像不平鋪
- round： 背景圖像自動縮放直到適應且填充滿整個容器。（CSS3）
- space： 背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）
說明：
設置或檢索對象的背景圖像如何鋪排填充。必須先指定 <' background-image '> 屬性。
- 允許提供2個參數，如果提供全部2個參數，第1個用於橫向，第二個用於縱向。
- 如果只提供1個參數，則用於橫向和縱向。特殊值repeat-x和repeat-y除外，因為repeat-x相當於repeat no-repeat，repeat-y相當於no-repeat repeat，即其實repeat-x和repeat-y等價於提供了2個參數值
- 對應的腳本特性為backgroundRepeat。
背景跟着內容滾動 background-attachment
語法：
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local
默認值：scroll
適用於：所有元素
繼承性：無
動畫性：否
計算值：指定值
取值：
- fixed： 背景圖像相對於 窗體固定。
- scroll： 背景圖像相對於 元素固定，也就是說當元素內容滾動時背景圖像不會跟着滾動，因為背景圖像總是要跟着元素本身。但會隨元素的祖先元素或窗體一起滾動。
- local： 背景圖像相對於 元素內容固定，也就是說當元素隨元素滾動時背景圖像也會跟着滾動，因為背景圖像總是要跟着內容。（CSS3）
說明：
設置或檢索背景圖像是隨對象內容滾動還是固定的。必須先指定 <' background-image '> 屬性。
- 對應的腳本特性為backgroundAttachment。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-attachment 背景跟着內容動</title> <style type="text/css"> .parent{ height: 2000px; } .sample{ overflow: scroll; font-size: 22px; margin: 200px; width: 230px; height: 200px; border: 2px solid black; background-image: url(red.png); background-attachment: local; } </style> </head> <body> <div class="parent"> <div class="sample"> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </div> </div> </body> </html>