CSS中使用image data URI來處理圖片的方法

即將圖片資源轉(zhuǎn)換為 base64 字符串格式嵌到頁面或樣式中。這樣連圖片的請求鏈接都省了。

如：

使用方式

CSS Code復(fù)制內(nèi)容到剪貼板

/**?數(shù)據(jù)格式?**/

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/**?樣式引用?**/

.icon{

width:30px;height:30px;

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);

}

標(biāo)簽語法：

data : 取得數(shù)據(jù)協(xié)議

image/png : 取得數(shù)據(jù)的協(xié)議名稱(注意這里也圖片資源也可以使用字體等)

base64 : 數(shù)據(jù)編碼方式

iVBOR... : 編碼后數(shù)據(jù)

優(yōu)點(diǎn)

減少 HTTP 請求

避免某些文件跨域

無圖片緩存等問題(但是一般 css 也是有緩存的好不好)

缺點(diǎn)

兼容性 ( IE6,7 不兼容, 可以使用 MHTML 來解決 )

瀏覽器不會(huì)緩存該圖片(這里是否是這樣我存有疑惑，因?yàn)楹孟窨瓷先ヒ彩堑谝淮渭虞d的時(shí)候慢)

增加 css 文件大小

編碼成本及維護(hù)(展示不直觀，目前需手動(dòng)轉(zhuǎn)換，我暫時(shí)不知道自動(dòng)替換之類的插件)

之前有看到過篇測評說性能上比 sprite 微弱一些，一時(shí)間找不到鏈接

綜合起來，data URI可以使用在

* 圖片尺寸很小，使用一條 http 請求有點(diǎn)浪費(fèi)，如漸變背景框

* 圖片在全站大規(guī)模使用，且很少被更新的，如 loading相關(guān)閱讀:

iOS開發(fā)基礎(chǔ)之C語言

微信公眾平臺(tái)開發(fā)入門教程(SAE方倍工作室)

C#實(shí)現(xiàn)Ruby的負(fù)數(shù)索引器

WIN8開機(jī)慢!磁盤占用100%的終極解決方法

JCrop+ajaxUpload 圖像切割上傳的實(shí)例代碼

Swift的74個(gè)常用內(nèi)置函數(shù)介紹

正則表達(dá)式常用元字符整理小結(jié)

jQuery中Form相關(guān)知識(shí)匯總

利用java反射機(jī)制調(diào)用類的私有方法(推薦)

js改變css樣式的三種方法推薦

淺談C++指針(必看)

Win10 10525預(yù)覽版桌面上的水印怎么刪除？

CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級(jí)及樣式覆蓋問題探討

Android中AlarmManager基本用法分析

總結(jié)

以上是生活随笔為你收集整理的css不支持data image,CSS_CSS中使用image data URI来处理图片的方法，即将图片资源转换为 base64 字 - phpStudy...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。