Html 在 CSS 文件中使用相对 URL，它相对于哪个位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/940451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using relative URL in CSS file, what location is it relative to?
提问by anonymous coward
When defining something like a background image URL in a CSS file, when using a relative URL, where is it relative to? For example:
在 CSS 文件中定义背景图像 URL 之类的内容时，使用相对 URL 时，它相对于何处？例如：
Suppose the file /stylesheets/base-styles.csscontains:
假设文件/stylesheets/base-styles.css包含：
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 documentin /stylesheets/or relative to the current documentit's included to? Possible paths like:
如果我包括通过这个样式表到不同的文件<link ... />会在CSS文件中的相对URL是相对于样式表文件中/stylesheets/或相对于当前文档包括它是什么？可能的路径如：
/item/details.html
/about/index.html
/about/extra/other.html
/index.html
回答by Alex Rozanski
According to W3:
根据W3：
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
部分 URL 相对于样式表的源进行解释，而不是相对于文档
Therefore, in answer to your question, it will be relative to /stylesheets/.
因此，在回答您的问题时，它将与/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.
如果您考虑一下，这是有道理的，因为 CSS 文件可以添加到不同目录中的页面，因此将其标准化为 CSS 文件意味着 URL 将在链接样式表的任何地方工作。
回答by M4N
It's relative to the CSS file.
它是相对于 CSS 文件的。
回答by Codebeef
It's relative to the stylesheet, but I'd recommend making the URLs relative to your URL:
它相对于样式表，但我建议使 URL 相对于您的 URL：
div#header {
background-image: url(/images/header-background.jpg);
}
That way, you can move your files around without needing to refactor them in the future.
这样，您可以随意移动文件，而无需将来重构它们。
回答by jrista
In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC3986]) are resolved to full URIs using a base URI. RFC 3986, section 5, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.
For example, suppose the following rule:
body { background: url("yellow") }is located in a style sheet designated by the URI:
http://www.example.org/style/basic.cssThe background of the source document's BODY will be tiled with whatever image is described by the resource designated by the URI
http://www.example.org/style/yellowUser agents may vary in how they handle invalid URIs or URIs that designate unavailable or inapplicable resources.
为了创建不依赖于资源绝对位置的模块化样式表，作者可以使用相对 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 方面可能会有所不同。
Taken from the CSS 2.1 spec.
取自CSS 2.1 规范。
回答by Quentin
For CSS style sheets, the base URI is that of the style sheet, not that of the source document.
对于 CSS 样式表，基本 URI 是样式表的 URI，而不是源文档的 URI。
(Anything else would be broken, IMNSHO)
（其他任何东西都会被破坏，IMNSHO）
回答by mms
One issue that can occur, and seemingly break this is when using auto minimization of css. The request path for the minified bundle can have a different path than the original css. This may happen automatically so it can cause confusion.
可能发生的一个问题是使用 css 的自动最小化时似乎会破坏这一点。缩小包的请求路径可以与原始 css 具有不同的路径。这可能会自动发生，因此可能会导致混淆。
The mapped request path for the minified bundle should be "/originalcssfolder/minifiedbundlename" not just "minifiedbundlename".
缩小包的映射请求路径应该是“/originalcssfolder/minifiedbundlename”，而不仅仅是“minifiedbundlename”。
In other words, name your bundles to have same path (with the /) as the original folder structure, this way any external resources like fonts, images will map to correct URIs by the browser. The alternative is to use absolute url( refs in your css but that isn't usually desirable.
换句话说，将您的包命名为与原始文件夹结构具有相同的路径（使用 /），这样任何外部资源（如字体、图像）都将被浏览器映射到正确的 URI。另一种方法是在您的 css 中使用绝对 url( refs ，但这通常是不可取的。
回答by Jakob Sternberg
This worked for me. adding two dots and slash.
这对我有用。添加两个点和斜线。
body{
background: url(../images/yourimage.png);
}
回答by Keshh Chiei
Try using:
尝试使用：
body {
background-attachment: fixed;
background-image: url(./Images/bg4.jpg);
}
Imagesbeing folder holding the picture that you want to post.
Images是包含您要发布的图片的文件夹。
