首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在CSS中使用background-image: url ()内联图像

在CSS中使用background-image: url ()内联图像
EN

Stack Overflow用户
提问于 2010-07-03 06:23:08
回答 2查看 9K关注 0票数 3

我尝试在我的.css文件中加载一个gif文件,如下所示:

代码语言:javascript
运行
复制
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编码

如果我以常规的方式链接图像,它工作得很好:

代码语言:javascript
运行
复制
li.box_entry {
  background-image: url(images/dot.gif);   background-repeat: no-repeat;
}

然而,这只是一个小文件,我想减少超文本传输协议的请求,这就是为什么我试图将它加载到CSS文件中,这样应该会更快,尽管由于base64编码,文件会变得更大。

内联图像在HTML中可以很好地工作,如下例所示:

代码语言:javascript
运行
复制
<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不是一个好主意。我宁愿在CSS文件中只定义一次图形,并在每次需要图像时加载适当的类。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-07-03 07:13:00

刚刚发现,问题出在base64编码器上:-/

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

坦克回击!

票数 1
EN

Stack Overflow用户

发布于 2010-07-03 06:28:21

请务必通读。它涵盖了该主题的许多方面(如IE支持)。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3169438

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档