html - 带有背景图像 : 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 文件中只定义一次图形，并在每次需要图像时加载适当的类。

Answer 1

请务必阅读 this通过。它涵盖了该主题的许多方面(例如 IE 支持)。