3

我正在尝试在我的 .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 图像使用 http://www.motobit.com/util/base64-decoder-encoder.asp进行 base64 编码

如果我以常规方式链接图像，它可以正常工作：

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

4

2 回答 2

1

请务必通读此内容。它涵盖了该主题的许多方面（如 IE 支持）。

于 2010-07-02T22:28:21.083 回答
1

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

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

坦克的回复！

于 2010-07-02T23:13:00.107 回答