css里边照片相对路径难题(同包/不一样包)讨论

2021-03-21 05:30 jianzhan
在CSS文档里,有时要用到background,即加1个情况照片,1般在做按钮款式时会常常用到。

css中加情况照片依据照片及css文档的相对性部位分1下几类型型:
1.同包下:background : url(aaa.gif);
2.不一样包:
在这类状况下有2中方式能够设定,1种是应用肯定相对路径,即http://www.iteye.com/aaa.gif这类,但是1般不强烈推荐这么用,不好于新项目移殖;1种是应用相对性相对路径,最先必须寻找照片文档和css文档相互的1个根文件目录,随后再再加照片的子文件目录,例如:
css文档部位:WebRoot/test/css/a.css
照片文档部位:WebRoot/platform/resource/images/icons/a.gif
要想寻找相互的根文件目录就必须用到 "../" 这个相对路径的意思是上1级文件目录,假如是双层上级文件目录,便是 "../../" 那末,依照这类写法的话,a.css中得情况照片css应当这么写:

拷贝编码
编码以下:

background:url(../../platform/resource/images/icons/a.gif)

为何呢?

最先,大家观查这两个文档的部位,能够发现,相互的根文件目录是WebRoot,
大家最先在a.css的部位寻找WebRoot,因此有了"../../" 随后拼接照片的子文件目录的相对路径 又有了"platform/resource/images/icons/a.gif" 合在1起后便是上面的結果了。