在html中url的写法,CSS中url()地址写法

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

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

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

【问题描述】:

比如你有Web项目solo,假如目录结构如下:

ec2b8988132ab733c801c1f61366a6a1.png

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

body {

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

}

接着你扑哧扑哧的在本地用tomcat把部署起来,正当你在能看到首页而欢欣鼓舞之时,然而你发现了背景没其效果,如下图:

f373cd059b43cbb64dbf4bd4cc9e7320.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。那么改为:

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/目录下的文件了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值