我想在我的 .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&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文件中定义图形,并在需要图片时加载适当的类。