background-image: url(data:image/gif;base64,AAAA)
這算是一種圖片路徑的新寫法。將圖片進行編碼,然后存在文檔中。
我先解釋一下各自含義:
data: ----獲取數(shù)據(jù)類型名稱
image/gif; -----指數(shù)據(jù)類型名稱
base64 -----指編碼模式
AAAAA ------指編碼以后的結(jié)果。
background-image: url(data:image/gif;base64,AAAA)這句話的意思總體就是“獲取數(shù)據(jù)類型是image gif文件,編碼采用ASCII 字符,ASCII編碼內(nèi)容是‘AAAA’”
我知道你清楚沒。這實際就是一種新寫法。原理和以往不同。
以往的圖片路徑寫法是:
background-img:url(../image/xxx.gif)
圖片需要加載服務(wù)器指定路徑下的對應(yīng)gif文件。
新寫法就是:
background-image: url(data:image/gif;base64,AAAA)
圖片本身就已經(jīng)以ASCII的形式存在了文檔中,只需要瀏覽器進行編譯就可以了。
新寫法將圖片寫入文檔中,可以減少客戶端對服務(wù)器的請求。
換句話講,原來我們要加載圖片,是從服務(wù)器下載。
現(xiàn)在瀏覽器直接把那一串ASCII按照你的文件類型進行編譯就可以出來結(jié)果了。
但是也會有問題
ie8貌似不兼容。
具體LZ可以再研究研究
原文參考自css+div教程:http://www.software8.co/wzjs/cssdiv/3593.html