在CSS文件里写下 url(../images/bg.png) 这类路径时，实际解析结果并不是由HTML页面所在位置决定，而是以当前CSS文件所在目录为基准。这个机制决定了同一段路径写法，放在不同层级的CSS文件中会指向完全不同的资源。理解这一点，是跨目录引用不出错的前提。
一、相对路径的解析参照点：CSS文件自身
CSS中的相对路径并不仅仅出现在 background-image 里，@import 导入其他样式表、src 加载字体文件、cursor 指定自定义光标时，都会涉及路径解析。所有这些路径的参照点都是当前样式表文件所在的目录，而不是引用这个样式表的HTML页面所在目录。换句话说，即使HTML页面放在站点根目录，通过 <link> 引入了 css/style.css，那么 style.css 里的相对路径仍然从 css/ 这个目录开始计算。
举个例子，假设项目结构如下：
project/
css/
style.css
theme/
dark.css
images/
bg.png
fonts/
icon.woff2
如果 css/style.css 需要引用图片 images/bg.png，正确的写法是 url(../images/bg.png)。这里的 .. 表示从 css/ 目录向上一级，到达 project/ 根目录，再进入 images/ 目录。如果写成 url(images/bg.png)，浏览器会去请求 css/images/bg.png，而这个路径往往并不存在，最终报出404。
还需要注意 ./ 的含义，它表示当前目录。比如 ./style.css 与 style.css 在解析结果上等价，但显式写出 ./ 有时能让路径边界更清楚，特别是在构建工具处理资源时。相对路径中，.. 可以连续使用，../../ 表示向上两级目录，但层级越深，后期维护越容易出错。
二、跨目录引用的典型写法
跨目录引用最常见的场景是：CSS文件集中放在一个目录，而图片、字体等资源分散在其他兄弟目录中。此时需要根据CSS文件所在的层级，准确计算向上跳转的级数。下面的示例展示 css/theme/dark.css 如何引用根目录下的图片、字体以及其他样式表。
/* css/theme/dark.css */
@import url("../style.css");
body {
background-image: url("../../images/bg.png");
src: url("../../fonts/icon.woff2") format("woff2");
}
在这个文件中，../style.css 表示从 theme/ 目录向上回到 css/ 目录，再找到 style.css；而 ../../images/bg.png 则表示向上两级，先回到 css/，再回到 project/，然后进入 images/ 目录。这个计算方式的核心是：每次 .. 都向上一级，后面的目录名从新的层级开始查找。
为了便于记忆，可以把常见的路径写法归纳如下：
- 当前目录：
./image.png或image.png，表示与CSS文件同一层级。 - 子目录：
sub/image.png，进入CSS文件所在目录下的sub/文件夹。 - 父目录：
../image.png，回到上一级目录再找文件。 - 兄弟目录：
../sibling/image.png，回到上一级后进入另一个同级目录。 - 多级父目录：
../../shared/image.png，向上两级再进入指定目录。
还有一个容易混淆的地方是，CSS文件中使用 @import 导入其他样式表时，被导入的样式表内部的相对路径仍然以被导入文件自身所在目录为基准。例如 dark.css 导入了 ../style.css，而 style.css 里如果写了 url(../images/bg.png)，这个路径依然从 css/ 目录开始计算，并不会因为是从 dark.css 导入而改变参照点。
三、常见路径错误与排查方法
第一种高频错误是把CSS中的相对路径误认为是相对于HTML页面。比如HTML文件位于 project/index.html，它通过 <link> 引入 css/style.css。如果开发者以为CSS里写 url(images/bg.png) 能指向项目根目录下的 images/，实际请求却会落到 css/images/bg.png。要避免这种错误，只需要记住一句话：CSS文件在哪里，路径就从哪里开始。
第二种错误出现在Windows本地路径的书写上。例如 C:\projects\site\css\style.css 这种绝对路径中，反斜杠在CSS字符串里可能被解析为转义字符，导致路径解析异常。浏览器中的CSS路径建议统一使用正斜杠 / 作为目录分隔符，这不仅跨平台兼容，也符合URL规范。很多开发者从资源管理器复制路径直接粘贴到CSS中，结果因为反斜杠而踩坑。
第三种常见问题是大小写不一致。服务器文件系统通常区分大小写，images/Bg.png 和 images/bg.png 是两个完全不同的资源。如果本地开发环境使用Windows，文件系统不区分大小写能正常显示，但部署到Linux服务器后会突然失效。养成文件名统一小写、连字符代替空格的习惯，能减少这类运维层面的问题。
排查路径错误时，浏览器开发者工具是最直接的入口。打开Network面板，刷新页面，找到状态码为404的请求，查看请求的完整URL。这个URL就是浏览器根据CSS文件位置和相对路径拼接后的真实请求地址，把它和项目目录结构对比，通常能立刻发现多写或少写了一层 ..。此外，也可以在控制台执行下面的代码，查看某个元素最终解析出的背景图路径：
getComputedStyle(document.body).backgroundImage;
如果返回的路径是 http://localhost:8000/css/images/bg.png，而实际文件在 http://localhost:8000/images/bg.png，就说明相对路径少跳了一级，需要在原来基础上加一个 ../。
四、可维护的路径管理建议
当项目层级变深后，连续出现 ../../../../images/bg.png 这样的路径会让代码变得脆弱。目录结构调整一次，所有相关路径都要跟着改。因此，在设计项目结构时，可以尽量把CSS文件和静态资源放在浅层级，或者让所有CSS文件位于同一目录深度，这样大多数路径只需要一到两级 ..。
对于使用构建工具的项目，Webpack、Vite、Rollup等打包器允许通过别名或模块解析机制来管理资源路径。比如在Vite中，可以使用 @/assets/images/bg.png 这样的别名路径，由构建工具在编译阶段转换成正确的相对路径或绝对路径。CSS预处理器如Sass、Less也支持定义变量，把资源根路径抽离成统一变量，例如：
/* Sass 变量示例 */
$asset-path: "../assets";
body {
background-image: url("#{$asset-path}/images/bg.png");
}
这种方式的好处是，如果资源目录发生迁移，只需要修改变量值，而不用逐个修改引用。不过要注意，使用变量拼接路径时，最终生成的CSS仍然是普通相对路径，浏览器解析规则不变。
最后，如果站点部署在域名根目录下，也可以考虑使用根相对路径，例如 /images/bg.png。这种写法以网站根目录为起点，不受CSS文件层级影响，但它有一个明显限制：使用 file:// 协议直接双击HTML文件时，路径会指向磁盘根目录，导致资源加载失败。因此，根相对路径更适合部署到服务器的项目，本地开发通常配合本地服务器使用。
相对路径看似只是几个点和斜杠的组合，但它是CSS资源引用中出错率最高的地方之一。只要明确参照点、数清层级、统一分隔符，并在问题出现时利用Network面板查看实际请求地址，大多数跨目录链接故障都能快速定位并解决。