css中允許應用純色作為背景，也允許使用圖片作為背景。 background一共有8個對應的屬性： 1、background-color：顏色值 用於設定背景的顏色 有3種定義顏色的形式， 1， 顏色關鍵字表示法，可直接用英文單詞來定義，比如red，blue，green等。 2， 16進位表示法，用 ...
css中允許應用純色作為背景，也允許使用圖片作為背景。
background一共有8個對應的屬性：
1、background-color：顏色值
用於設定背景的顏色
有3種定義顏色的形式，
1， 顏色關鍵字表示法，可直接用英文單詞來定義，比如red，blue，green等。
2， 16進位表示法，用#000000到#ffffff區間內的16進位數來表示。
3， 三原色表示法，rgb（r，g，b）,其中r,g,b分別代表紅色，綠色，藍色，取值範圍為0到255.
預設值：transparent
註意：
1.當同時定義了背景顏色和背景圖像時，背景圖像覆蓋在背景顏色之上。
2.如果設置了 <' background-image '>，同時也建議設置 <' background-color '> 用於當背景圖像不可見時保持與文本顏色有一定的對比度。
3.對應的腳本特性為backgroundColor。
2、background-image：url(“圖片路徑”);
用於設定對象的背景圖片
預設值：none
註意：
如果定義了多組背景圖，且背景圖之間有重疊，寫在前面的將會蓋在寫在後面的圖像之上。
對應的腳本特性為backgroundImage。
3、background-repeat：
設置或檢索對象的背景圖像如何鋪排填充。
取值：
repeat-x：背景圖像在橫向上平鋪
repeat-y：背景圖像在縱向上平鋪
repeat：背景圖像在橫向和縱向平鋪
no-repeat：背景圖像不平鋪
round：背景圖像自動縮放直到適應且填充滿整個容器。（CSS3）
space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）
但ie覽器還不支持以上兩個新屬性。
預設值：repeat
註意：
允許提供2個參數，如果提供全部2個參數，第1個用於橫向，第二個用於縱向。
如果只提供1個參數，則用於橫向和縱向。特殊值repeat-x和repeat-y除外，因為repeat-x相當於repeat no-repeat，repeat-y相當於no-repeat repeat，即其實repeat-x和repeat-y等價於提供了2個參數值
對應的腳本特性為backgroundRepeat。
4、background-position
用於設置或檢索對象的背景圖像位置。
取值：
<percentage>：用百分比指定背景圖像填充的位置。可以為負值。其參考的尺寸為容器大小減去背景圖片大小
<length>：用長度值指定背景圖像填充的位置。可以為負值。
center：背景圖像橫向和縱向居中。
left：背景圖像在橫向上填充從左邊開始。
right：背景圖像在橫向上填充從右邊開始。
top：背景圖像在縱向上填充從頂部開始。
bottom：背景圖像在縱向上填充從底部開始
預設值：0% 0%，效果等同於left top
註意：
該屬性提供2個參數值（CSS3中已允許提供3，4個值）。
如果提供三或四個，每個<percentage>或<length>偏移前都必須跟著一個邊界關鍵字（即left | right | top | bottom，不包括center），偏移量相對關鍵字位置進行偏移。
示例：假設要定義背景圖像在容器中右下方，並且距離右邊和底部各有20px
縮寫方式：
background:url(test1.jpg) no-repeat right 20px bottom 20px;
你也可以設置3個參數值：
拆分方式：
background:url(test1.jpg) no-repeat left bottom 10px;
要註意的是：設置3個或4個值，偏移量前必須有關鍵字。也就是說，形如："10px bottom 20px" ，這樣的參數設置是錯誤的，因為10px前面沒有關鍵字。
如果提供兩個，第一個用於橫坐標，第二個用於縱坐標。
如果只提供一個，該值將用於橫坐標；縱坐標將預設為50%（即center）。
對應的腳本特性為backgroundPosition。
5、background-attachment：
設置或檢索背景圖像是隨對象內容滾動還是固定的。
取值：
fixed：背景圖像相對於窗體固定。
scroll：背景圖像相對於元素固定，也就是說當元素內容滾動時背景圖像不會跟著滾動，因為背景圖像總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。
local：背景圖像相對於元素內容固定，也就是說當元素隨元素滾動時背景圖像也會跟著滾動，因為背景圖像總是要跟著內容。（CSS3）
預設值：scroll
還有三個是css3中新加入的
6、background-size
檢索或設置對象的背景圖像的尺寸大小。
取值：
<length>：用長度值指定背景圖像大小。不允許負值。
<percentage>：用百分比指定背景圖像大小。不允許負值。
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
預設值：auto
註意：
- 該屬性提供2個參數值(特性值cover和contain除外)。
- 如果提供兩個，第一個用於定義背景圖像的寬度，第二個用於定義背景圖像的高度。
- 如果只提供一個，該值將用於定義背景圖像的寬度，第2個值預設為auto，即高度為auto，此時背景圖以提供的寬度作為參照來進行等比縮放。
- 對應的腳本特性為backgroundSize。
- 不支持寫入 <' background '> 縮寫方式。
- iOS6.1及更早cover值在body上有bug；同時background-size: cover; background-attachment: fixed;配合時也有bug。
7、background-clip：指定對象的背景圖像向外裁剪的區域。
取值：
padding-box：從padding區域（不含padding）開始向外裁剪背景。
border-box：從border區域（不含border）開始向外裁剪背景。
content-box：從content區域開始向外裁剪背景。
text：從前景內容的形狀（比如文字）作為裁剪區域向外裁剪，如此即可實現使用背景作為填充色之類的遮罩效果。遮罩效果
預設值：border-box
註意：
- text屬性值，目前為webkit only
2.對應的腳本特性為backgroundClip。
8、background-origin
取值：
padding-box：從padding區域（含padding）開始顯示背景圖像。
border-box：從border區域（含border）開始顯示背景圖像。
content-box：從content區域開始顯示背景圖像。
預設值：padding-box
