在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:

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

因此,在回答你的问题时,它将是相对的/stylesheets/.

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

Answer 2

它与CSS文件有关.

Answer 3

它与样式表有关,但我建议您使用相对于您的URL的URL:

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

这样,您可以移动文件,而不需要在将来重构它们.

Answer 4

为了创建不依赖于资源的绝对位置的模块化样式表,作者可以使用相对URI.相对URI(如[RFC3986]中所定义)使用基URI解析为完整URI.RFC 3986第5节定义了此过程的规范算法.对于CSS样式表,基本URI是样式表的URI,而不是源文档的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规范.

Answer 5

对于CSS样式表,基本URI是样式表的URI,而不是源文档的URI.

(其他任何东西都会被打破,IMNSHO)

Answer 6

可能发生的一个问题,似乎打破这个问题是使用css的自动最小化.缩小捆绑包的请求路径可以具有与原始css不同的路径.这可能会自动发生,因此可能会造成混淆.

缩小的束的映射请求路径应该是"/ originalcssfolder/minifiedbundlename"而不仅仅是"minifiedbundlename".

换句话说,将您的包命名为与原始文件夹结构具有相同的路径(使用/),这样任何外部资源(如字体,图像)都将通过浏览器映射到正确的URI.另一种方法是使用绝对URL(在你的CSS中引用,但通常不是这样).