HTML/CSS absolute and relative paths
Today we are talking about the path problem of CSS, what is absolute positioning, relative positioning, root path and so on.
As a coder, you must know what the root path is, then
【Problem Description】:
For example, if you have a web project solo, if the directory structure is as follows:
In cy.css, an index.html file in the root directory is referenced to the following code:
body {
background-image: url("/skins/cy/images/icons.png");
}
Then you deploy it locally with tomcat, just when you can see the home page and rejoice, however You found that the background has no effect, as shown below:
But if you open http://localhost:8080/solo/skins/cy/images/icons.png like this, the image still exists, so what's the solution?
【problem analysis】:
This is really bad news, but all we can do is to slowly analyze the reasons.
The reason is the problem of the path.
As a web development, you can easily think that /.. refers to the contextPath, which is the root directory of the project. This may be inertia. In fact, in the resource positioning of CSS, /.. actually refers to the root path, but this root path is still different from what I said above. This depends on the deployment location of your project in the server, which is often different. It is related to the specific settings of the server.
【problem solved】:
method one:
Use relative positioning instead. This must be possible. It should be noted that in relative positioning, the current position is the directory where the CSS file is located. Change it to:
background-image: url("../images/icons.png");
Method Two:
改用还是绝对定位，假如服务器没做任何设定，并且项目没有部署到tomcat下webapps的ROOT目录下，由于CSS的/..定位到的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。
（假如你是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时，就是直接访问D:/eclipsepath/workspace/solo/目录下的文件了。