css里面图片路径问题(同包/不同包)探讨

ttx9n · 发表于 2013-4-11 15:22:24

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" 合在一起后就是上面的结果了。

平平安安 · 发表于 2022-8-14 20:32:42

挺不错的东西

4k0mp7m · 发表于 2022-9-10 08:36:11

谢谢分享，先下来用用

9jduu05 · 发表于 2022-9-18 00:25:52

啦啦啦啦啦啦哈哈哈

5ble0ks · 发表于 2022-9-21 07:49:25

灌灌灌灌水

mkonji · 发表于 2022-12-12 12:51:25

天天源码社区www.tiantianym.com

lba36h7g · 发表于 2023-2-14 21:01:24

了乐趣了去了去了去了去了

6ox8dn · 发表于 2023-4-28 07:52:07

这个源码还可以

dm00ji1s · 发表于 2023-9-10 15:26:15

这个源码还可以

plvo189 · 发表于 2023-10-1 12:44:35

看看看看

账号		自动登录	找回密码
密码			立即注册

[心得技巧] css里面图片路径问题(同包/不同包)探讨

相关帖子