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

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

如：

使用方式

CSS Code復制內容到剪貼板

/**?數據格式?**/

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

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

.icon{

width:30px;height:30px;

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

}

標簽語法：

data : 取得數據協議

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

base64 : 數據編碼方式

iVBOR... : 編碼后數據

優點

減少 HTTP 請求

避免某些文件跨域

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

缺點

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

瀏覽器不會緩存該圖片(這里是否是這樣我存有疑惑，因為好像看上去也是第一次加載的時候慢)

增加 css 文件大小

編碼成本及維護(展示不直觀，目前需手動轉換，我暫時不知道自動替換之類的插件)

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

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

* 圖片尺寸很小，使用一條 http 請求有點浪費，如漸變背景框

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

iOS開發基礎之C語言

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

C#實現Ruby的負數索引器

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

JCrop+ajaxUpload 圖像切割上傳的實例代碼

Swift的74個常用內置函數介紹

正則表達式常用元字符整理小結

jQuery中Form相關知識匯總

利用java反射機制調用類的私有方法(推薦)

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

淺談C++指針(必看)

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

CSS層疊樣式表之CSS解析機制的優先級及樣式覆蓋問題探討

Android中AlarmManager基本用法分析

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。