html - 使用相对URL CSS文件中, 则它相对于什么位置?

  显示原文与译文双语对照的内容

当在CSS文件中定义背景图像URL时,当使用相对URL时,它相对于? 例如:

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


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

如果我将这里通过 <link.. ./> style-sheet到不同的文档中会包含到相对的URL在CSS文件中被 /stylesheets/ 或者相对于当前文档中相对于样式表文档 包括它是为了什么? 可能的路径如下:


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

时间:

根据 。W3:

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

因此,对于你的问题,它将相对于 /stylesheets/

如果你再考虑一下这个的CSS文件可以被添加到不同的目录中的页面,所以standardising很有道理,因为它意味着将工作无论在任何样式表的url被添加到CSS文件。

为了创建不依赖于资源绝对位置的模块样式表,作者可以使用相对 uri 。 使用底图uri,相对 URI ( 在 [RFC3986] 中定义) 都已经解析为完整 uris. RFC 3986,第 5节,定义了这个流程的标准算法。 对于CSS样式表,基URI是,源文档的样式表的,不是这个。

例如假设以下规则:


body { background: url("yellow") }

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


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

文档的源正文的背景将与由URI指定的资源所描述的图像平铺


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

用户代理在处理指定无效或者不适用资源的无效uri或者uri时可能会有所不同。

取自 CSS 2.1规范

它相对于样式表,但我建议你相对于你的网址制作 url:


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

这样,你就可以移动你的文件,而无需在将来重构它们。

...