我尝试在我的.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;
}
然而,这只是一个小文件,我想减少超文本传输协议的请求,这就是为什么我试图将它加载到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不是一个好主意。我宁愿在CSS文件中只定义一次图形,并在每次需要图像时加载适当的类。
发布于 2010-07-03 07:13:00
刚刚发现,问题出在base64编码器上:-/
我现在使用的是这个,它为gif图像生成了不同的代码,并且起作用了:http://www.opinionatedgeek.com/dotnet/tools/base64encode/
坦克回击!
发布于 2010-07-03 06:28:21
请务必通读。它涵盖了该主题的许多方面(如IE支持)。
https://stackoverflow.com/questions/3169438
复制相似问题