background複合屬性詳解（上）：background-image

background複合屬性是個很複雜的屬性，花樣很是多，比較神奇的是css3

中支持多圖片背景了，這篇文章先講講background-image屬性，其餘背景屬性會在後續的文章綜合總結。

 

1、最基本的狀況是指定一張圖片的url做爲背景：

<style> .parent{ height:200px; width:500px; border: 10px solid #7d7d7b; background-color: #bff; background-image:url(halfRombes.png);     } </style>

 

效果以下（瀏覽器默認背景圖片重複平鋪）：

 

二：將漸變指定爲背景：

      background-image: linear-gradient(to left top, red, blue);

 

效果以下（由右下角到左上角，由紅色漸變到藍色）：

 

除了線性漸變，還有徑向漸變，徑向漸變也就是由中心向外輻射的漸變。現代瀏覽器（包括ie10+）支持。

具體的語法這裏不討論，由於篇幅實在太長，請移步獲取更詳細的信息：

MDN#linear-gradient，

MDN#radial-gradient。

 

3、使用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編碼而不借助其餘工具：

一、一個方法是基於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="">' } }

 

二、還有一個方法是使用HTM5的canvas中圖片處理的toDataURL()方法，我以前的一篇文章就是講如何使用canvas處理圖像數據的方法：

canvas學習筆記：canvas對圖片的像素級處理--ImageData的應用，

能夠簡單的修改下文章中的代碼，只要將圖片畫到畫布上，不要修改圖片數據，而後經過toDataURL()返回圖片的base64編碼便可。

 

4、終於講到多圖片背景了：

在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 #7d7d7b;       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 #7d7d7b;       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中插入不可信數據，那麼固然能夠放心的省略引號。