在 CSS 文件中使用相对 URL，它相对于啥位置？

Posted 2023-02-22

【中文标题】在 CSS 文件中使用相对 URL，它相对于啥位置？

【英文标题】：Using relative URL in CSS file, what location is it relative to?在 CSS 文件中使用相对 URL，它相对于什么位置？

【发布时间】：2010-10-30 17:45:08

【问题描述】：

在 CSS 文件中定义诸如背景图像 URL 之类的内容时，当使用相对 URL 时，它相对于哪里？例如：

假设文件/stylesheets/base-styles.css包含：

div#header  
    background-image: url('images/header-background.jpg');

如果我通过 <link ... /> 将此样式表包含到不同的文档中，CSS 文件中的相对 URL 是否会相对于 /stylesheets/ 中的样式表文档 或 相对于当前文档它包含到？可能的路径，例如：

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

【参考方案1】：

根据W3：

部分 URL 被解释为相对于样式表的来源，而不是相对于文档

因此，在回答您的问题时，它将与/stylesheets/ 相关。

如果您考虑这一点，这是有道理的，因为 CSS 文件可以添加到不同目录中的页面中，因此将其标准化为 CSS 文件意味着 URL 将在样式表链接的任何位置起作用。

【讨论】：

看起来规则有一个例外：-ms-behavior in IE :(

还有一个例外：当 url 是自定义属性的默认值时。假设您定义了.banner background-image: var(--bgimg, url('images/default.jpg')); ，但还没有为--bgimg 定义值。然后在页面/index.html 上，.banner 将查找/images/default.jpg，但在另一页/about/index.html 上.banner 将查找/about/images/default.jpg。非常破碎的海事组织。

更正：Chrome v60修复了上述默认值bug。

如果你的 css 在一个包中，那么路径真的无关紧要。它不是你想的那样，没有什么是相对的了。

我在使用属性时遇到了问题：background: var(--primary-color-background) no-repeat center center url("maps.jpg"); 这在 ios 和 Safari 中不起作用。只有绝对路径 /resources/maps.jpg 在 Safari 中与 css 属性结合使用。

【参考方案2】：

它与 CSS 文件有关。

【参考方案3】：

它与样式表相关，但我建议将 URL 设为相对于您的 URL：

div#header  
  background-image: url(/images/header-background.jpg);

这样，您可以移动文件，而无需在未来重构它们。

【讨论】：

前面多出来的“/”有什么区别？

就像命令行中的路径名一样，路径前面的 / 表示它指向当前 Web 服务器上的绝对资源。

实际上有一种情况，使用相对于 CSS 文件的 URI 会更好。就我而言，我有一个目录“/css/”，其中放置了所有 CSS 数据。现在，我想在一个单独的文件夹中测试网站上的新功能。很难测试，例如测试文件夹中的新背景图像。这完全取决于您的需求...

绝对路径使得很难将解决方案放在域的子文件夹中。您想要支持子文件夹的原因有很多。它使测试变得更容易（正如 Diego 所提到的），您可以将以前的版本/预发布版本与 prod 放在同一个域中。企业代理服务器设置为支持 SSO、将所有解决方案移至一个域等的未来变化。尤其是使用 SSL，可能希望避免维护多个域名的开销。对我来说，这些考虑比“更容易移动我的 .css 文件”更重要。

图像和类似的东西无论如何都会进入 cdn，所以这是完美的

【参考方案4】：

为了创建不依赖于资源绝对位置的模块化样式表，作者可以使用相对 URI。相对 URI（定义在 [RFC3986] 中）使用基本 URI 解析为完整 URI。 RFC 3986 第 5 节定义了此过程的规范算法。对于 CSS 样式表，基本 URI 是样式表的，而不是源文档的。

例如，假设以下规则：

body  background: url("yellow") 

位于由 URI 指定的样式表中：

http://www.example.org/style/basic.css

源文档的 BODY 的背景将与 URI 指定的资源所描述的任何图像平铺

http://www.example.org/style/yellow

用户代理在处理无效 URI 或指定不可用或不适用资源的 URI 的方式上可能会有所不同。

取自CSS 2.1 spec。

【参考方案5】：

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

（其他任何东西都会被破坏，IMNSHO）

【参考方案6】：

使用自动最小化 css 时可能会出现一个问题，并且似乎会破坏这个问题。缩小包的请求路径可以具有与原始 css 不同的路径。这可能会自动发生，因此会引起混淆。

缩小包的映射请求路径应该是“/originalcssfolder/minifiedbundlename”，而不仅仅是“minifiedbundlename”。

换句话说，将您的包命名为与原始文件夹结构具有相同的路径（使用 /），这样任何外部资源（如字体、图像）都将映射到浏览器的正确 URI。另一种方法是在你的 css 中使用绝对 url( refs 但这通常是不可取的。

【讨论】：

这为我节省了大量时间！谢谢。应该记录更多

【参考方案7】：

尝试使用：

body 
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);

Images 是存放您要发布的图片的文件夹。