css中URL路径相关介绍

如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。 本文就来为大家介绍一些css url相关知识。

项目中,为a标签添加背景,老是没效果 (VS2013中相关文件的位置:CSS文件位于/Content中,图片位于/images中)

为a标签添加背景的CSS代码为:background:url(images/sort.png) no-repeat 0 3px;

一直没有效果,后来才发现是绝对路径,相对路径搞错了。

url(images/sort.png)表示的是当前文件夹下的images文件夹下的sort.png图片,因为CSS文件位于/Content文件夹,所以系统就去/Content/images下寻找sort.png图片,而此时图片位于/images中,当然就找不到了。

修复方法:

1. 绝对路径: url(/images/sort.png) 表示到根目录下寻找images文件夹里面的sort.png图片

2. 相对路径:url(../images/sort.png) 表示从当前目录返回到上一层目录,即/目录,然后再查找/目录下的images目录里面的sort.png图片

以下是百度的内容:

"." 代表当前所在目录,相对路径。如:

<a href="./abc">文本</a>或<img src="./abc" />;

".." 代表上一层目录,相对路径。如:

<a href="../abc">文本</a>

<img src="../abc"/>;

"../../" 代表的是上一层目录的上一层目录,相对路径。 如:

<img src="../../abc" />;

"/" 代表根目录,绝对路径。

推荐:css参考手册

以上就是css中URL路径相关介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏