使用background-image: url()在CSS中嵌入图片

Question

我想在我的 .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请求，所以我试图在CSS文件中直接加载它，这样应该更快，虽然由于base64编码文件会变大。

内联图片对我来说在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/ 然而，我已经测试了Google Chrome和Firefox，但没有效果。

我错过了什么吗？

这是我正在处理的页面: http://lansuite.orgapage.de 左下角的标志已经作为内联HTML工作。 然而，整个页面上的灰色/黄色点出现了多次。这就是为什么将它们写成内联HTML不是一个好主意的原因。我更愿意在CSS文件中定义图形，并在需要图片时加载适当的类。

- JochenJung

---

对于每个页面上不在 x 或 y 轴上重复的图片，使用 CSS Sprites 是否更好？就像在 http://css-tricks.com/css-sprites/ 中所示的那样。 - Alex

Answer 1

请务必阅读这篇文章。它涵盖了该主题的许多方面（如IE支持）。

- gblazex

---

有趣的文章。感谢指引！+1然而我还是没能让我的代码工作。关于IE话题： 要想支持IE，我可以为IE6/7加载不同的css文件，以常规方式加载gif文件。这对我来说不是个问题。 - JochenJung

Answer 2

刚刚发现，问题出在base64编码器上 :-/

我现在使用了这个编码器，它为gif图像生成了不同的代码，这样就可以解决问题了： http://www.opinionatedgeek.com/dotnet/tools/base64encode/

感谢回复！

- JochenJung