插入圖片新方式：data:image

咱們在使用<img>標籤和給元素添加背景圖片時，不必定要使用外部的圖片地址，也能夠直接把圖片數據定義在頁面上。對於一些「小」的數據，能夠在網頁中直接嵌入，而不是從外部文件載入。

 

如何使用

.CSS

p {

    background: url(data:image/gif;base64,R0lGOD......jIQA7)

    no-repeat left center;

    padding: 5px 0 5px 25px;

}

或

p {

    background: url(fakepath/image.gif)

    no-repeat left center;

    padding: 5px 0 5px 25px;

}

 

HTML

<img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />

或

<img src="fakepath/image.gif" />

 

語法：

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

 

* data的一些類型：

    * data:,<文本數據>

    * data:text/plain,<文本數據>

    * data:text/html,<HTML代碼>

    * data:text/html;base64,<base64編碼的HTML代碼>

    * data:text/css,<CSS代碼>

    * data:text/css;base64,<base64編碼的CSS代碼>

    * data:text/javascript,<Javascript代碼>

    * data:text/javascript;base64,<base64編碼的Javascript代碼>

    * data:image/gif;base64,base64編碼的gif圖片數據

    * data:image/png;base64,base64編碼的png圖片數據

    * data:image/jpeg;base64,base64編碼的jpeg圖片數據

    * data:image/x-icon;base64,base64編碼的icon圖片數據

 

好處：

減小HTTP請求

 

瀏覽器兼容性：

IE7及如下不支持。有以下解決方案：

使用IE條件註釋

 <!--[if lt IE 8]>

    ...... IE7及如下內容 ......

<![endif]-->

 

* CSS Hack

*background-image:url(sprite.png); /* Only IEv6 & 7 see this */

 

你還應該知道的：

l  轉化以後的圖片代碼一般比圖片自己要大。

l  IE8支持的最大內嵌圖片代碼爲32768個字節

l  以data形式插入圖片不是萬能的，不少狀況下，插入一張圖片反而易於修改和維護。