您现在的位置是:网站首页> 编程资料编程资料
css里面图片路径问题(同包/不同包)探讨_心得技巧_网页制作_
2023-11-08
313人已围观
简介 css中加背景图片根据图片及css文件的相对位置分一下几种类型1.同包下2.不同包,接下来针对这两种情况做一下介绍,感兴趣的朋友可以参考下哈,希望可以帮助到你
在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中加背景图片根据图片及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" 合在一起后就是上面的结果了。
相关内容
- 在FireFox中导入导出Cookies与收藏夹的解决办法_心得技巧_网页制作_
- 浮动菜单,可实现上下滚动的效果_心得技巧_网页制作_
- 如何用JavaScript获取/计算页面元素的offset_心得技巧_网页制作_
- 最短JS判断是否为IE6(IE的写法)_心得技巧_网页制作_
- 关于调试CSS跨浏览器样式bug的问题_心得技巧_网页制作_
- 关于开发手机网站的一些总结_心得技巧_网页制作_
- 图片动态加载技术应用及jquery.lazyload插件使用实例_心得技巧_网页制作_
- 导入css文件使用判断条件实现_心得技巧_网页制作_
- html中Div与table的区别(各方面细节探讨)_心得技巧_网页制作_
- 刀塔传奇黑鸟技能级阵容全面剖析_手机游戏_游戏攻略_
