css中图片路径，以及在不同浏览器的兼容问题

今天在写一个静态页面时发现了一个特奇葩的问题，就是我在css中使用相对路径设置了一张背景图片，发现在火狐谷歌浏览器中均正常显示；而用百度浏览器测试时发现：当我把代码发布到tomcat访问时显示正常，但当我直接本地打开页面时就获取不到图片了；而IE浏览器连tomcat上都访问不到图片 = =。。

初步可能是不同浏览器支持的图片格式不同，比如如果".jpg"图片直接改后缀成".png"（图片实际上还是jpg规则）,这时放在IE中就会无法显示，而对火狐谷歌不会影响。测试后排出了可能性。

后来经过尝试之后发现，是CSS中 设置背景时，“background:rgba(0, 0, 0, 0) url("../images/gerenzhuanchu.png") no-repeat scroll left center  ;”中“rgba"的问题，将其放到图片路径url后面，所有浏览器均正常显示。

查了下资料，果然是因为”rgba“在不同浏览器中的兼容性问题，不同版本浏览器兼容性可参考：http://www.jb51.net/css/149342.html。至于为什么”rgba"放到"url"后面就显示正常，我觉得这是语法规则问题，“url”在前面相当于设置了一个保留背景色。

最后还发现了比这问题更奇葩的浏览器，也就是上面说的百度浏览器的问题。直接上图

从百度浏览器在两种路径下不同的调试风格来看，tomcat调试更像是火狐谷歌，本地文件调试更像是IE，直觉告诉我这浏览器又是我们自己的组装货 = =。试试就好

另外关于CSS中图片相对路径问题，还有一点注意就是，url的路径是该css文件相对于图片的相对路径，而不是引用该css的html文件相对于图片的相对路径。

还可能会遇到一个小问题，比如CSS中“background:url("../images/gerenzhuanchu.png")no-repeat  ”这里，“no-repeat”前缺了空格，这时火狐谷歌会自动解析使得显示正常，而IE就没这么智能了。

论工具的便利性。