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/

但是，我使用谷歌浏览器和Firefox进行了测试，但事实并非如此。

我错过了什么吗？

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

Answer 1

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

Answer 2

刚刚发现，问题是base64编码器： - /

我现在使用了这个，它为gif图像生成了不同的代码并且有效： http://www.opinionatedgeek.com/dotnet/tools/base64encode/

坦克回复！

带有background-image的CSS中的内嵌图像：url（）

2 个答案: