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

CSS中使用image data URI來處理圖片的方法是怎樣的，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

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

1. /** 數(shù)據(jù)格式 **/  

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

3.   

4. /** 樣式引用 **/  

5. .icon{   

6.     width: 30px; height: 30px;   

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

8. }  

標簽語法：

    data : 取得數(shù)據(jù)協(xié)議
    image/png : 取得數(shù)據(jù)的協(xié)議名稱（注意這里也圖片資源也可以使用字體等）
    base64 : 數(shù)據(jù)編碼方式
    iVBOR... : 編碼后數(shù)據(jù)

優(yōu)點

    減少 HTTP 請求
    避免某些文件跨域
    無圖片緩存等問題(但是一般 css 也是有緩存的好不好)

缺點

    兼容性 （ IE6,7 不兼容, 可以使用 MHTML 來解決 ）
    瀏覽器不會緩存該圖片（這里是否是這樣我存有疑惑，因為好像看上去也是第一次加載的時候慢）
    增加 css 文件大小
    編碼成本及維護(展示不直觀，目前需手動轉(zhuǎn)換，我暫時不知道自動替換之類的插件)
    之前有看到過篇測評說性能上比 sprite 微弱一些，一時間找不到鏈接

綜合起來，data URI可以使用在
* 圖片尺寸很小，使用一條 http 請求有點浪費，如漸變背景框
* 圖片在全站大規(guī)模使用，且很少被更新的，如 loading

看完上述內(nèi)容，你們掌握CSS中使用image data URI來處理圖片的方法是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！