内嵌图像与背景图像：网址（）

我想我的.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

内嵌图像与背景图像：网址（）

回答

相关问题