如果你在引用文件时 (如加入超链接, 或者插入图片等), 使用了错误的文件路径, 就会导致引用失效 (无法浏览链接文件, 或无法显示插入的图片等). 本文就来为大家介绍一些 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 参考手册 https://www.html.cn/book/css/
来源: http://www.css88.com/web/css/17289.html