CSS中使用imagedataURI來處理圖片的方法是怎樣的

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

創(chuàng)新互聯(lián)長(zhǎng)期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為莒縣企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)，莒縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

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 請(qǐng)求
    避免某些文件跨域
    無圖片緩存等問題(但是一般 css 也是有緩存的好不好)

缺點(diǎn)

    兼容性（ IE6,7 不兼容, 可以使用 MHTML 來解決）
    瀏覽器不會(huì)緩存該圖片（這里是否是這樣我存有疑惑，因?yàn)楹孟窨瓷先ヒ彩堑谝淮渭虞d的時(shí)候慢）
    增加 css 文件大小
    編碼成本及維護(hù)(展示不直觀，目前需手動(dòng)轉(zhuǎn)換，我暫時(shí)不知道自動(dòng)替換之類的插件)
    之前有看到過篇測(cè)評(píng)說性能上比 sprite 微弱一些，一時(shí)間找不到鏈接

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

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

網(wǎng)站欄目：CSS中使用imagedataURI來處理圖片的方法是怎樣的
文章網(wǎng)址：http://bm7419.com/article6/ijhjig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、網(wǎng)站策劃、軟件開發(fā)、品牌網(wǎng)站建設(shè)、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容