在 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 是样式表的，而不是源文档的。

例如，假设以下规则：

 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 是样式表的，而不是源文档的。

（其他任何东西都会被破坏，IMNSHO）

Answer 6

一个可能出现的问题，并且似乎打破了这一点，是在使用 css 的自动最小化时。 缩小包的请求路径可以具有与原始 css 不同的路径。 这可能会自动发生，因此可能会引起混淆。

缩小包的映射请求路径应该是“/originalcssfolder/minifiedbundlename”，而不仅仅是“minifiedbundlename”。

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

Answer 7

这对我有用。 添加两个点和斜线。

body{
    background: url(../images/yourimage.png);
}

Answer 8

尝试使用：

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

Images是包含您要发布的图片的文件夹。