url()地址写法

偏执的太偏执、 2022-05-26 00:14 223阅读 0赞

HTML/CSS 绝对路径和相对路径

今天我们讲的是CSS的路径问题，什么绝对定位，相对定位，根路径之类的。

作为一个coder你肯定是知道什么是根路径的，那

【问题描述】：

比如你有Web项目solo，假如目录结构如下：

[![HTML/CSS <wbr>绝对路径和相对路径][HTML_CSS_wbr]][HTML_CSS_wbr_HTML_CSS_wbr]

在cy.css中有如在根目录的一个index.html文件被引用到如下代码：

body \{  
    background-image: url("/skins/cy/images/icons.png");  
\}  
    接着你扑哧扑哧的在本地用tomcat把部署起来，正当你在能看到首页而欢欣鼓舞之时，然而你发现了背景没其效果，如下图：

[![HTML/CSS <wbr>绝对路径和相对路径][HTML_CSS_wbr 1]][HTML_CSS_wbr_HTML_CSS_wbr 1]

但是你这样打开[http://localhost:8080/solo/skins/cy/images/icons.png][http_localhost_8080_solo_skins_cy_images_icons.png]那图片又是存在的，那这个何解呢？

【问题分析】:

这个真的可以算是噩耗了，但我们能做的只能慢慢分析原因了。

究其原因，还是路径的问题。

作为web开发，你很容易以为/..就是指的是contextPath了，也就是项目根目录了，这个可能惯性了。其实，在css的资源定位中，/..其实指得是根路径，但是这个根路径和我上边的说得还是有出入的，这个取决于你的项目在服务器中的部署位置，这个往往又是和服务器的具体设置有关系的。

【问题解决】：

方法一：

改用相对定位，这个想必都会，需要注意的是，相对定位中，当前位置就是CSS文件所在目录。改为：

background-image: url("../images/icons.png");

方法二：

改用还是绝对定位，假如服务器没做任何设定，并且项目没有部署到tomcat下webapps的ROOT目录下，由于CSS的/..定位到的[http://localhost:8080][http_localhost_8080]。那么改为：

background-image: url("/solo/skins/images/icons.png");

方法三：

显然就是在服务器端做文章了，使用根路径部署，css文件就不用动,以下两者选其一:

1，部署到tomcat下webapps的ROOT目录，你需要这样做，部署包重命名为 ROOT.war 并移到部署目录下，例如 d:/tomcat/webapps/ROOT.war，那么/..就会指向[http://localhost:8080/solo][http_localhost_8080_solo]。

（假如你是b3log那么建议，你在latke.properties把contextPath和staticPath都别设定）

2，更改tomcat的配置，如下修改（更多信息请自己搜了咯）  
         找到tomcat的server.xml（在conf目录下），找到  
    unpackWARs="true" xmlValidation="false" xmlNamespaceAware="false">。在前插入

其中D:/eclipsepath/workspace/solo/就是我想设置的网站根目录，然后重启tomcat。

再次访问[http://localhost:8080][http_localhost_8080]时，就是直接访问D:/eclipsepath/workspace/solo/目录下的文件了。

[HTML_CSS_wbr]: http://s16.sinaimg.cn/mw690/001YM3cQgy6EqAaIy0Def&690
[HTML_CSS_wbr_HTML_CSS_wbr]: /images/20220526/13f906eda49549478f4836dd51bee56d.png
[HTML_CSS_wbr 1]: http://s16.sinaimg.cn/mw690/001YM3cQgy6EqAO81mT6f&690
[HTML_CSS_wbr_HTML_CSS_wbr 1]: /images/20220526/1a1924a2702c49adb6ff2338372ceae8.png
[http_localhost_8080_solo_skins_cy_images_icons.png]: http://localhost:8080/solo/skins/cy/images/icons.png
[http_localhost_8080]: http://localhost:8080/
[http_localhost_8080_solo]: http://localhost:8080/solo