手机
当前位置:查字典教程网 >网页设计 >心得技巧 >css里面图片路径问题(同包/不同包)探讨
css里面图片路径问题(同包/不同包)探讨
摘要:在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。css中加背景图片根据图片及css文件的相对...

在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。

css中加背景图片根据图片及css文件的相对位置分一下几种类型:

1.同包下:background : url(aaa.gif);

2.不同包:

在这种情况下有2中方法可以设置,一种是使用绝对路径,即http://www.iteye.com/aaa.gif这种,不过一般不推荐这么用,不利于项目移植;一种是使用相对路径,首先需要找到图片文件和css文件共同的一个根目录,然后再加上图片的子目录,比如:

css文件位置:WebRoot/test/css/a.css

图片文件位置:WebRoot/platform/resource/images/icons/a.gif

想要找到共同的根目录就需要用到 "../" 这个路径的意思是上一级目录,如果是两层上级目录,就是 "../../" 那么,按照这种写法的话,a.css中得背景图片css应该这么写:

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

为什么呢?

首先,我们观察这两个文件的位置,可以发现,共同的根目录是WebRoot,

我们首先在a.css的位置找到WebRoot,所以有了"../../" 然后拼接图片的子目录的路径 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的结果了。

【css里面图片路径问题(同包/不同包)探讨】相关文章:

struts2跳转后css和js失效的问题解决思路及实现步骤

网页心得:网页色彩的搭配

网页访问速度的关键问题和解决方法

如何解决外边距margin叠加的问题探讨

网页图片优化工具及使用技巧分享

css样式优先级及层叠的顺序排序探讨

TOM.COM网站首页改版的体验感受

搜索文本框焦点离开时文本位置跳动问题解决方法

IE6/7下a.getAttribute(href,2)的问题分析及解决

鼠标经过图片超链接时改变图片的大小(宽、高)的css

精品推荐
分类导航