CSS2.1中有5個background屬性可以用來控制元素的背景。這5個屬性是：

為了更好的駕馭背景圖片，CSS3添加了3個新的background相關屬性，以及一系列的相關屬性值。

不過在我們與這幾個新屬性親密接觸之前需要知道3個重要的盒子。

假設現在有個容器，容器里面有些內容，雖然我們看不見，但是這些內容的外面是有一個盒子的，這個盒子就是content-box。

//zxx:這里的英文原文是：”The quick brown fox jumped over the lazy web developer. “，而實際上，這里的英文也不是最原始的，是作者從”The quick brown fox jumped over the lazy dog! “這句話改編而來的，至于這里的原話實際上沒有什么特殊的意思，只是這句話包含了英文中全部的26個字母。這里，我按照字面意思整個了打油詩。

現在，如果我們給容器的每個邊上增加padding，我們將會得到一個新的盒子，即padding-box。

如果我們給容器的每個邊邊框上邊框（這里斷句如下：每個邊邊 框上 邊框）。我們將會迎來第三個盒子——border-box。

這三個盒子用來確定背景圖片的落腳之處，以何種尺寸顯示，以及哪個地方要修剪。

后面會專門花口水講這三個盒子，但是，眼下，先揭開background-position以及background-repeat羞澀的面紗。

默認情況下，背景圖片(background images)是在padding-box的左上角落腳安家的。如下圖：

我們可以使用background-position屬性改變默認的位置。

在CSS2.1中，我們可以使用兩個值來決定背景圖片相對于元素的位置。

其中第一個值決定了水平位置：

第二個值決定了垂直位置：

在CSS3中，我們可以給background-position屬性指定高達4個值。

開始的兩個值代表了水平軸：

后面的兩個值代碼垂直軸：

這是很強大的“裝備”升級，這意味著我們可以相對于上下左右任意一個角落定位，而不是之前的只能相對于左上角定位。

正值和負值

我們可以使用正值決定背景圖片的位置，也可以使用負值。

正值所產生的效果是把背景圖片往右下方移動——元素背景區域內部。

負值產生的效用是把背景圖片往左上方向移動——元素背景區域外面。

默認情況下，背景圖片會沿著x軸，y軸重復。同樣的，是起始于padding-box的左上角。盡管背景圖片平鋪起始于padding-box左上角，但是其從各個方向朝外面平鋪，包括border區域。

在CSS2.1中，我們可以使用四個不同的關鍵字改變平鋪的行為，如下：

repeat repeat?

在CSS3中，我們定義repeat的時候可以使用兩個值代替一個值。

其中第一個值代表水平軸：

第二個repeat表示垂直軸：

如果我們只使用一個值，瀏覽器會自動解釋成兩個值。這就保證了background-repeat屬性向后兼容。

CSS3允許我們使用background-repeat屬性兩個新值：space和round。其兼容性如下表：

space值的功效可以簡單理解為圖片的兩端對齊平鋪，多出來的空間用空白代替：

呈現效果大致如下：

round屬性的效果也可以說是兩端對齊，但其多出來空間通過自身的拉伸來填充。

呈現效果大致如下：

不過需要注意的是使用這種方法圖片可能會被拉伸或扭曲。這些新值讓我們在布局背景圖片的時候更靈活了。例如我們可以使用兩個值來定義不同的垂直和水平行為：

在CSS3中我們可以使用三個全新的屬性，如下：

background-origin

關于CSS3 background-origin基礎知識以及效果demo可以參見這里。background-origin是用來決定背景圖片定位在哪個盒子中。我們可以使用background-origin屬性的三個值進行背景圖片的定位，它們是：content-box、padding-box以及border-box。

兼容性如下表：

background-clip

關于CSS3 background-clip基礎知識以及效果demo可以參見這里。background-clip屬性是用來決定在背景區域中背景圖片剪裁的位置。其支持三個值，為：content-box、padding-box以及border-box。

兼容性如下表：

備注說明：Firefox 1.0 ~Firefox 3.6支持老的解析：border和padding，但是并不支持content以及后來的content-box值。

background-size

關于CSS3 background-size基礎知識以及效果demo可以參見這里。

在CSS2.1中，我們是沒有辦法控制背景圖片的大小的。然而，在CSS3中允許我們使用background-size屬性來控制背景圖片的大小。例如：

我們可以使用長度值或是百分比，或者是兩個新的關鍵字：contain和cover。

例如上圖中的第一個值表示寬度，第二個值表示高度，如下示意：

如果只設置了一個值，那么第二個值會自動用初始值”auto“代替，如下圖：

“contain“值的效用是按比例將圖片縮放到最大尺寸以使其高寬都在背景區域里面，其主要用在背景圖片比容器大的情況下。需注意使用該值圖片可能有扭曲。

div { background-size: contain; }

“cover“值的效用是按比例將圖片縮放到最小尺寸以使其完整覆蓋背景區域，其主要用在背景圖片比容器小的情況下。需注意使用該值圖片可能有扭曲。

div { background-size: cover; }

background-size兼容性如下表：

有些CSS屬性可以讓我們合并書寫，這樣就不用太多行的聲明。而background屬性允許我們使用一條規則設置所有單獨的背景屬性。CSS2.1中解析：

CSS3中解析為：

理解初始值

如果你想使用縮寫屬性，你需要理解知道初始值。因為這些值有些可以應用，而有些可以當做打醬油的。當我們使用一個縮寫的時候，沒有必要定義所有的background屬性，例如：

瀏覽器會自動添加我們實際上不需要的初始值：

具體這些初始值參見下表：

當我們對同一個元素應用兩個background規則的時候會發現有一個是不起作用的。

原因見下圖：

現在，讓我們談論最激動人心的CSS3 backgrounds部分

在CSS2.1中，任何HTML元素只能添加一張背景圖片，然而，在CSS3中，我們可以給任意元素添加N張背景圖片，關于該特性的基礎知識及效果demo可以參見這里。該特性兼容性如下表：

一般寫法

CSS3允許我們給任意的background屬性添加多個以逗號分隔的屬性值，如下：

下面顯示的是三張背景圖更具體的例子：

每個圖片的大小，定位，平鋪都是根據其他背景屬性想對應的值。如果逗號分隔的值比背景圖片層要少，瀏覽器會拿使用過的列表中的值來充數來使分隔的值數目足夠。背景圖片以層的形式顯示 – 第一個在其他之上。列表中的第一個圖片是離用戶最近的，而下一個圖片會被渲染到第一個之后，以此類推。

所有的元素只能定義一個背景顏色，background-color所在的層被賦予為最底層，稱之為“終極層(final layer)”。background-color層在所有的background-image層之下。

縮寫

所有的這些背景屬性都可以合并成單獨的一行縮寫。多背景圖的縮寫規則與單背景圖是一致的，然后中間用逗號隔開。如下代碼：

p {background:        url (01.gif) no-repeat,    /*圖片1*/        url (02.gif) repeat left bottom,    /*圖片2*/        url (03.gif) repeat-y 10px 5px    /*圖片3*/}

與一般寫法中一樣，每個背景圖片都是以層的形式顯示，第一個在其他之上。

只有最底層，即所謂的“終極層”可以設置background-color，background-color只有設置在“終極層”上才能在讓所有背景圖顯示。如果background-color值被添加到其他雜七雜八的層（不是“終極層”）上，那么整個規則將不會顯示。background-color只能應用在終極層上，如下：

添加背景顏色比較安全的做法是使用獨立的background-color聲明，如下：

如果你想書寫更為復雜的縮寫，你需要注意一些瀏覽器的怪癖。//zxx:跳過一些理論下全部正確的屬性縮寫圖，直接展示提出問題的那張圖

如果完整按照上圖的寫法，在Safari 5, Firefox 4, Chrome 10下會有兩個問題。一是這些瀏覽器不認識縮寫規則中前斜杠，如果有這玩意，這些瀏覽器會直接忽視整個聲明；而是這些瀏覽器不認識縮寫規則中兩個盒子值(origin和clip)的使用，如果有這玩意，這些瀏覽器會直接忽視整個聲明。

因此，就目前而言，縮寫最好用在不太復雜的聲明上。但是如果你想包含全部的7個屬性，還是使用一般寫法代替為妙。

要有這種意識：漸變是一種代碼生成的圖片。他們可以使用url()值來代替。這就意味著你可以在多背景中使用漸變，例如下面展示：

如果你在多背景中添加前綴屬性會怎樣的？瀏覽器會無視其不認識的CSS，因而，這里整行聲明都不起作用。私有的前綴屬性只能被特定的瀏覽器識別，我們不能再同一個聲明中添加瀏覽器私有前綴，因為瀏覽器會忽視整個聲明，這就意味著我們不得不為每個特定的前綴屬性寫個background屬性。所有其他的背景圖片都必須包含在每一個聲明中。例如：

原作者：Russ Weakley
翻譯編輯：張鑫旭
轉自：http://www.zhangxinxu.com/wordpress/?p=1618