background復合屬性是個很復雜的屬性，花樣非常多，比較神奇的是css3
中支持多圖片背景了，這篇文章先講講background-image屬性，其他背景屬性會在后續的文章綜合總結。
一、最基本的情況是指定一張圖片的url作為背景：
<style> .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(halfRombes.png);
} </style>
效果如下（瀏覽器默認背景圖片重復平鋪）：
二：將漸變指定為背景：
background-image: linear-gradient(to left top, red, blue);
效果如下（由右下角到左上角，由紅色漸變到藍色）：
除了線性漸變，還有徑向漸變，徑向漸變也就是由中心向外輻射的漸變。現代瀏覽器（包括ie10+）支持。
具體的語法這里不討論，因為篇幅實在太長，請移步獲取更詳細的信息：
三、使用base64編碼的圖片：
以本文第一個例子的圖為例：
該圖的base64編碼為：
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII="
將圖片url指向該圖片編碼，那么會得到和第一個例子一樣的效果。
現代瀏覽器支持情況優秀，ie8+支持，對base64編碼具體支持情況移步：瀏覽器對base64編碼的支持情況
可以看見，base64編碼以data:開頭，指明是什么類型的圖片，如data:image/png;表示這串編碼是png圖片，接着是'base64;表示是base64編碼格式，最后跟着的就是圖片的編碼信息了。
那么base64是什么呢？
Base64是一種基於64個可打印字符來表示二進制數據的編碼方式，可用於在http環境下傳遞較長的標識信息。Base64常用於表示、傳輸、存儲一些二進制數據， 圖片也是二進制數據。（在Base64中的可打印字符包括字母A-Z、a-z、數字0-9，這樣共有62個字符，此外兩個可打印符號在不同的系統中而不 同）
base64編碼的圖片好處就在於：當要單獨使用很小的圖片（比如用於平鋪的背景圖），就可以將圖片改為base64形式來減少http請求。
我們可以通過HTML5的新特性自己來獲取圖片的base64編碼而不借助其他工具：
1、一個方法是基於HTML5的FileReader對象的readAsDataURL()方法，下面就是一個讀取input上傳的圖片然后展示出來的例子，this.result就是圖片的base64編碼信息。
document.getElementById("file").onchange=function(){ var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function(e){ document.body.innerHTML = '<img src="'+this.result+'" alt="">' } }
2、還有一個方法是使用HTM5的canvas中圖片處理的toDataURL()方法，我之前的一篇文章就是講如何使用canvas處理圖像數據的方法：
canvas學習筆記：canvas對圖片的像素級處理--ImageData的應用，
可以簡單的修改下文章中的代碼，只要將圖片畫到畫布上，不要修改圖片數據，然后通過toDataURL()返回圖片的base64編碼即可。
3、還有個更懶的方法就是借助firefox、chrome瀏覽器自帶的開發工具（通過F12召喚）查看圖片的base64編碼。
具體方法如下，灰常簡單：
firefox：首先定位到要查看編碼的圖片，在inspector里面右鍵該圖片，選擇下圖紅框中的copy image data url，就能copy該圖片的base64編碼，粘貼使用即可。
chrome：同樣要定位到要查看編碼的圖片，在elements里面右鍵該圖片，選擇下圖紅框中的open link in resources panel，切換到resources板塊，右鍵該圖片，選擇copy image as data url就能copy該圖片的base64編碼，粘貼使用即可。
圖（1）：
圖（2）：
是不是超級簡單！
四、終於講到多圖片背景了：
在CSS3穩定版草案中對多圖片背景制定了規范： background-image屬性可以通過","來分隔多個圖像url設置多個背景圖像。
每一個圖像背景就創建了一個背景層（background layer），有幾個背景圖片就定義了幾個層。background-image圖片列表中第一個圖像離用戶最近，最后的圖像離用戶最遠，background-color在離用戶最遠的背景圖像下面，border-color和border-image在第一個背景圖像上面，類似ps中的圖層的概念。
如果一個圖像（比如URI無效）不能成功加載出來，瀏覽器會將對應background-image的值認定為none（對應的圖層還是存在的），表示圖片丟失，但不影響其他背景圖片的渲染和呈現。由於網絡會存在不穩定導致背景圖像加載不出來，所以始終應該提供background-color。
當然最關心的還是瀏覽器的支持情況，讓人放心的是chrome,firefox,ie9+，移動終端瀏覽器都支持多背景圖片。
好了好了，廢話有點多，還是例子更直觀：
接下來我會用到4張圖(halfRombes.png, MicrobiaMat.png, Stairs.png, Stars.png)，按順序添加到background-image中:
代碼如下：
.parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(halfRombes.png), url(MicrobiaMat.png), url(Stairs.png), url(Stars.png); background-position: left top, right bottom, right top; background-repeat: no-repeat, repeat-x; }
是的，background-position,background-origin,background-repeat等屬性的值也要相應地進行設置，也是用","分隔開，一一對應聲明的多張圖片。如果某個屬性設置了過多的值，則舍棄排在后面的多余的值；如果某個屬性沒有提供足夠的值，就重復應用 該屬性的值列表。效果如下：
咱們來逐條分析：
由於排在背景圖片列表前面的圖片會在上層，而后面的圖片在下層，所以看到三角形的圖在最上面，五角星的圖在最下面。
position只給了3個值，所以后面的圖會重復position列表的值，所以實際上是：left top, right bottom, right top, left top;
repeat只給了2個值，所以會重復該屬性列表，實際上是：no-repeat, repeat, no-repeat, repeat;
其他背景屬性值的應用規則同樣如此。
有意思的是，background：inherit;（ie7-不支持）可以讓元素繼承父元素的背景屬性，就連多圖片背景也不例外哦（現代瀏覽器支持多圖背景的繼承，移動端更是妥妥的支持），下面是一個嵌套了div的例子，在上面例子中.parent容器嵌套一個.child容器，並對子容器應用如下樣式：
.child{ margin-top: 220px; /*為了讓子容器顯示在父容器下面，比較好比較*/ height: 200px; background:inherit; /*繼承父元素的背景*/ }
結果是這樣的：
當然，base64編碼的圖片也可以用於多圖片背景，漸變也可以，甚至可以混用在一起！
pc端和移動端瀏覽器也能提供很不錯的支持。
將上面的例子混在一起是這樣的：
.parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(halfRombes.png), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII=), url(Stairs.png), linear-gradient(to left top, red, blue); background-position: left top, right bottom, right top; background-repeat: no-repeat, repeat-x; }
效果如下：
我承認這個圖是很丑，但只是為了說明用法。這里有個使用多個漸變設置背景圖案的一個網站，奧妙之處大家自己玩味，上面的圖也是從這個網站借用來的：css3patterns
五：設置多圖片背景混合模式：
當在一個容器同時指定了多個背景圖片后，默認情況下，圖片是按聲明的圖片順序來一層層疊加顯示，類似於ps中的圖層的概念。默認情況下，如果上層的圖片背景透明，那么可以看到下層的圖片，如上層的圖片不透明，那么就看不到下層的圖片了。但是有個屬性正好能用來定義多圖背景的圖片重疊顯示方式，這個屬性是：
background-blend-mode：[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity ]
（對於各可能值的描述，這里有更詳細的正式說明：MDN#blend-mode）
通過指定背景混合模式，能夠讓背景圖片和背景顏色的重疊部分的顏色以一定的方式混合。
可以指定一種混合模式應用到所有背景圖片，也可以逐個指定不同的混合模式，根據background-image聲明的圖片順序依次設置。
ie瀏覽器和uc瀏覽器是不支持的，safari部分支持（不支持hue，saturation，luminosity，color）：瀏覽器對background-blend-mode支持情況。
當我對.parent容器應用：background-blend-mode:luminosity;
效果是這樣的（safari不支持luminosity值）：
哈哈，由此可以知道background-blend-mode不能通過設置background：inherit被繼承。
需要注意的是background-blend-mode還沒納入css候選推薦，但是瀏覽器支持情況已經很給力了。
不得不感慨，CSS真的是越來越強大了。
在文末，覺得還是有必要解開一個疑惑：
為什么url里面的值有人用引號包起來，有人不用引號包起來呢？
其實w3c對uri值的編碼 ：http://www.w3.org/TR/2011/PR-CSS2-20110412/syndata.html#uri
規范原文是這么說的：
The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.
Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.
翻譯成中文就是：url()可以用可選的空格包住可選的單引號或雙引號，接着包住uri本身。當url()沒有用引號包住uri時，如果uri中包含括號、空格、單引號、或者雙引號，必須通過'\'進行轉碼，例如，如果uri包含'()'，那么要轉碼成這樣：'\(', '\)'。
也就是url(a.png) 等價於url( a.png )，等價於url('a.png)，等價於url("a.png"),等價於url( "a.png" )。
所以不加引號是符合規范的，並且可以減少css文件大小，雖然作用微乎其微。瀏覽器們對此的實現是符合規范，（ie9下的ie7模式有點怪胎，不管他）
有觀點認為不加引號會有安全問題，這個主要是由於xss攻擊，但是既然css文件是開發者自己編寫的，也就是不會在url中插入不可信數據，那么當然可以放心的省略引號。
本文到此就要結束啦，主要講了background-image屬性，下次將會對其他背景屬性進行完整的總結。
-------------------------------轉載注明出處^_^： http://www.cnblogs.com/suspiderweb/