html - 在 CSS 文件中使用相对 URL，它相对于什么位置？

Question

在 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

Answer 1

根据W3 :

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

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

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