Refer to http://zhidao.baidu.com/question/129465844.html&__bd_tkn__=26bf1e352b05802a4a14e964a08a27ae8d14dfeb8078338d51fed8133ea5c69d362ad36bb4bcda3b39bb3949f6bbe47087ac3af56e60b1f4e7eb6015795ef4369b62a1fc5a0f03de0125270fd43bca7a4f76e8757f29c384d73d357e725c475dbf6102414ec5d9dee97efbaccbdc8d03c33d23f54dae\
這算是一種圖片路徑的新寫法。將圖片進行編碼,然后存在文檔中。
我先解釋一下各自含義:
data: ----獲取數據類型名稱
image/gif; -----指數據類型名稱
base64 -----指編碼模式
AAAAA ------指編碼以后的結果。
background-image: url(data:image/gif;base64,AAAA)這句話的意思總體就是“獲取數據類型是image gif文件,編碼采用ASCII 字符,ASCII編碼內容是‘AAAA’”
我知道你清楚沒。這實際就是一種新寫法。原理和以往不同。
以往的圖片路徑寫法是:
background-img:url(../image/xxx.gif)
圖片需要加載服務器指定路徑下的對應gif文件。
新寫法就是:
background-image: url(data:image/gif;base64,AAAA)
圖片本身就已經以ASCII的形式存在了文檔中,只需要瀏覽器進行編譯就可以了。
新寫法將圖片寫入文檔中,可以減少客戶端對服務器的請求。
換句話講,原來我們要加載圖片,是從服務器下載。
現在瀏覽器直接把那一串ASCII按照你的文件類型進行編譯就可以出來結果了。