CSS背景图片路径设置
2016-07-07 17:07
337 查看
CSS背景图片路径设置
博客分类: Css相关
Java代码
/**
在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" 合在一起后就是上面的结果了。
**/
相关文章推荐
- Progress水平进度条的自定义样式
- CSS命名BEM规范
- CSS3条件判断——@supports
- CSS3 @font-face 规则
- CSS自动换行,强迫不换行
- WOW.js+animate.css让页面滚动时显示动画,使页面更有趣
- CSS中的em单位
- css3 text-shadow 为网页字体添加阴影
- css水平居中方法
- CSS3之利用选择器和content属性在页面中插入内容
- phpStudy6——php导出可以设置样式的excel表格
- CSS基础教程——纯CSS开发的气泡式提示框
- CSS基础教程——纯CSS开发的气泡式提示框
- css布局之负margin妙用及其他实现
- CSS3 自动换行
- html+css基础笔记
- html、css杂记
- textarea 在浏览器中固定大小和禁止拖动
- html+css复习之第1篇
- 百度开放了百度寻客推广样式