內嵌圖像與背景圖像：網址（）

我想我的.css文件中加載一個GIF文件，如：使用內嵌圖像與背景圖像：網址（）

li.box_entry { 
    background-image: url(data:image/gif;base64,R0lGODlhDAANANUAAPv7+/r6+vn5+ff39/b29vX19fPz8/Dw8O/v7+7u7u3t7ezs7Onp6ejo6Ofn5+bm5uTk5OPj4+Hh4eDg4N/f397e3tzc3Nvb29ra2tnZ2dbW1tXV1dPT09LS0tHR0c3NzcjIyMfHx8bGxsXFxby8vLe3t7W1tbOzs62traurq6mpqaioqKenp6ampqWlpaOjo6KioqGhoaCgoJ+fn5qampmZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADYALAAAAAAMAA0AAAZxQJtwyGYrVaLEQswGYWAOAygxWELxaFwCVUWi/bRyZaJM5nUezjInkcjHi8U2rVNhmJY++QZDg0NBgTExEPhxJ+NCogDY6PjiMqGisLCJeYDTIaNikmCgOhAwgnKUICKCsdBgYdMSgCRBgogSgZQ0EAOw==); 
    background-repeat: no-repeat; 
}

GIF圖像的base64編碼 http://www.motobit.com/util/base64-decoder-encoder.asp

它工作正常，如果我鏈接的圖像的常規方式：

li.box_entry { 
    background-image: url(images/dot.gif); background-repeat: no-repeat; 
}

然而，這只是一個小文件，我想減少HTTP的請求，這就是爲什麼我試圖加載它的權利在儘管文件由於base64編碼而變大，但CSS文件應該更快。

內嵌圖像在這個例子中工作得很好，我在HTML中，如：

<a href="index.php?mod=home&amp;language=es"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI 
WXMAAAsTAAALEwEAmpwYAAAAMklEQVR42mP8//8/AzUBEwOVweA3kPE/A8P/keVlFup6eEQmmxFo 
IAsD48grHEZcAQsAaegJIuin2YEAAAAASUVORK5CYII=" alt="es" title="Español" width="20" height="20" border="0" /></a>

根據這一頁，這也應該在CSS文件的工作： http://www.websiteoptimization.com/speed/tweak/inline-images/

然而，我與谷歌Chrome瀏覽器測試和Firefox，它沒有。

我錯過了什麼嗎？

這裏是我工作的頁面：然而，灰/黃點遍佈頁面出現多次 http://lansuite.orgapage.de 在左下角的標誌已經上班內嵌HTML 。這就是爲什麼將它們編寫爲內聯HTML並不是一個好主意。我寧願在CSS文件中只定義一次圖形，並在每次需要圖像時加載相應的類。

來源

2010-07-02 JochenJung

將CSS Sprites用於每個頁面上的圖像並且不在x或y軸上重複使用會更好嗎？像在http://css-tricks.com/css-sprites/中一樣？ – Alex 2010-07-02 23:24:53

剛剛發現，問題中的Base64編碼器： -/

我現在用這一個，它產生不同的代碼爲GIF圖像和工作： http://www.opinionatedgeek.com/dotnet/tools/base64encode/

坦克的答覆！

來源

2010-07-02 23:13:00 JochenJung

請務必閱讀this。它涵蓋了該主題的很多方面（如IE支持）。

來源

2010-07-02 22:28:21 galambalazs

有趣的artikel。感謝您指點我這個！ +1 但是，我仍然沒有得到我的代碼工作。關於IE主題：爲了獲得IE支持，我可以爲IE6/7加載一個不同的css文件，IE6/7以常規方式加載gif文件。這對我來說不是問題。 – JochenJung 2010-07-02 22:39:59

它適用於我：http://jsbin.com/egada – galambalazs 2010-07-02 22:49:33

內嵌圖像與背景圖像：網址（）

回答

相關問題