在 CSS 文件中使用相对 URL，它相对于哪个位置? [英] Using relative URL in CSS file, what location is it relative to?

问题描述

在 CSS 文件中定义背景图片 URL 之类的内容时，使用相对 URL 时，它相对于何处?例如:

When defining something like a background image URL in a CSS file, when using a relative URL, where is it relative to? For example:

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

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

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

If I include this style-sheet into different documents via <link ... /> will the relative URL in the CSS file be relative to the stylesheet document in /stylesheets/ or relative to the current document it's included to? Possible paths like:

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

推荐答案

根据 W3:

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

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

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

Therefore, in answer to your question, it will be relative to /stylesheets/.

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

If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.

这篇关于在 CSS 文件中使用相对 URL，它相对于哪个位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！