代码之家 › 专栏 › 技术社区 › JochenJung

CSS中带背景图像的内联图像:url()

inline-images base64 css html

3

JochenJung · 技术社区 · 14 年前

我正在尝试在.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/

但是,我用谷歌Chrome和火狐进行了测试,结果却没有。

我错过什么了吗?

这是我正在处理的页面: http://lansuite.orgapage.de 左下角的标志已经作为内联HTML工作但是,页面上的灰色/黄色圆点会出现多次。这就是为什么把它们写为内联HTML不是一个好主意。我希望在CSS文件中只定义一次图形,并在每次需要图像时加载适当的类。

2 回复 | 直到 12 年前

1

gblazex 14 年前

确保阅读 this 通过。它涵盖了主题的许多方面(如IE支持)。

2

1

JochenJung 14 年前

刚发现,问题是base64编码器:-/

我现在使用了这个,它为GIF图像生成了不同的代码,并且工作: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

回答的坦克!