在网页开发中，资源文件的引用是非常重要的一部分。而 CSS 文件中引用图片、字体等资源时，就需要使用到相对路径。本文将介绍如何正确使用 CSS URL 相对路径。
一、概述
1.1什么是相对路径？
相对路径是指从当前页面所在的位置出发，到达目标资源所需要经过的路径。与之相对的是绝对路径css url 相对路径，它是指从根目录开始到达目标资源所需要经过的路径。
1.2相对路径的优势
相对路径不仅简洁易懂，而且可以减少代码量，提高代码可读性和维护性。
二、CSS URL 相对路径的写法
2.1引用同级目录下的资源
当 CSS 文件与资源文件在同一个目录下时，只需写上资源文件名即可，例如：
background-image: url("bg.jpg");
2.2引用上级目录下的资源
当 CSS 文件与资源文件在不同级别的目录下时，需要使用“../”表示返回上级目录。例如：
background-image: url("../images/bg.jpg");
2.3引用下级目录下的资源
当 CSS 文件与资源文件在同一级别或者下一级目录中时，需要使用“./”表示当前目录。例如：
background-image: url("./images/bg.jpg");
三、注意事项
3.1相对路径不支持跨域访问
由于浏览器的同源策略限制css url 相对路径，相对路径不能跨域访问。如果需要跨域访问，则必须使用绝对路径。
3.2不同操作系统下斜杠方向不同
在 Windows 系统下，斜杠为“\”，而在 Linux 和 Mac 系统下则为“/”。因此，在书写相对路径时应注意斜杠方向。
四、总结
本文介绍了 CSS URL 相对路径的写法，并指出了注意事项。掌握了正确使用相对路径后，在开发中可以更加高效地引用资源文件。
