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

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

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

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

如果我通过<link ... />将这个样式表包含到不同的文档中，CSS文件中的相对URL是相对于样式表文档 in /stylesheets/还是相对于当前文档 ?可能的路径如下:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html
439049 次浏览
小开

它相对于CSS文件。

小开

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

(其他任何东西都会坏掉，IMNSHO)

小开
最佳答案

根据W3:

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

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

仔细想想，这是有道理的，因为CSS文件可以添加到不同目录下的页面中，因此将其标准化到CSS文件中意味着url可以在样式表链接的任何地方工作。

小开

为了创建不依赖于资源绝对位置的模块化样式表，作者可以使用相对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规范。

小开

它相对于样式表，但我建议让URL相对于你的URL:

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

这样，您就可以移动您的文件，而不需要在将来重构它们。

小开

当使用css的自动最小化时，可能会出现一个问题，似乎打破了这一点。缩小包的请求路径可以与原始css的路径不同。这可能会自动发生，所以会引起混乱。

迷你包的映射请求路径应该是“/originalcssfolder/minifiedbundlename”而不是“minifiedbundlename”。

换句话说，将你的包命名为与原始文件夹结构相同的路径(带有/)，这样任何外部资源，如字体，图像将被浏览器映射到正确的uri。另一种方法是在css中使用绝对url(refs)，但这通常不是可取的。

小开

尝试使用:

body {
background-attachment: fixed;
background-image: url(./Images/bg4.jpg);
}

Images是存放你想要发布的图片的文件夹。


提交答案