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

本文介绍了在CSS文件中使用相对URL，它相对于什么位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当在CSS文件中定义类似背景图片网址的内容时，使用相对网址时，相对于哪里？例如：

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

div＃header { background-image：url（'images / header-background.jpg'）; }

如果我通过< link ... /> 将在 / stylesheets / 中将CSS文件中的相对URL相对于样式表文档还是相对于当前文档？可能的路径如：

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

解决方案

根据 W3 ：

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

因此，在回答你的问题时，它将是相对于 / stylesheets / 。

如果你想到这一点，这是有道理的，因为CSS文件可以添加到不同目录中的页面，因此标准化到CSS文件意味着URL将在任何样式表链接。 / p>

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

Suppose the file /stylesheets/base-styles.css contains:

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

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

解决方案

According to W3:

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

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

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.