css中加背景图片根据图片及css文件的相对位置分一下几种类型:
1.同包下:background : url(aaa.gif)
2.不同包:
在这种情况下有2中方法可以设置,一种是使用绝对路径,即http://www.域名.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" 合在一起后就是上面的结果了。
操作步骤如下:
1、用快捷键“Ctrl+H”或者依次点击开始,编辑,替换调出“替换”对话框。
2、“替换”对话框,将光标放在“查找”栏中,点击更多。
3、点击特殊格式,选择“图形”。
4、完成后查找框中显示为“^g”。
5、将光标放在“替换”框中,点击“格式”,选择“图文框”。
6、弹出如图所示对话框,将水平位置设置为“居中”。
7、设置完成后确定,这时我们发现替换框下面有了这一行显示。
8、点击“替换全部”就可以了。
要是不会写,就直接背景图片浏览就行了
代码就是:#nav ul { background-image: url(../ly_img/navbj.jpg)}