在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

- anonymous coward

Answer 1

根据W3的说法：

部分URL与样式表的源相对解释，而不是相对于文档

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

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

- Alex Rozanski

---

似乎有一个例外规则：在IE中使用-ms-behavior会出现异常:( - Philipp Kyeck

还有一种异常情况：当URL是自定义属性的默认值时。比如你定义了 .banner { background-image: var(--bgimg, url('images/default.jpg')); }，但是还没有为 --bgimg 定义一个值。那么在页面 /index.html 上，.banner 将会寻找 /images/default.jpg，但是在另一个页面 /about/index.html 上，.banner 将会寻找 /about/images/default.jpg。我认为这非常糟糕。 - chharvey

更正：上述默认值错误已在Chrome v60中修复。 - chharvey

我在使用属性时遇到了问题：background: var(--primary-color-background) no-repeat center center url("maps.jpg");。这在 IOS 和 Safari 中无法正常工作。只有与 CSS 属性配合使用的绝对路径 /resources/maps.jpg 能够在 Safari 中正常工作。 - andy

@ChuckKollars，如果我正在使用C# bundles，并且.Net将所有CSS捆绑到一个缩小的文件中，那么文件的位置就不再重要了。 CSS不再存在，它在某个由.Net创建的文件中。当然，您可以解决相对路径，但是如果路径始终相对于主机，则更容易调试。 - Tod

Answer 2

这与CSS文件相关。

- M4N

Answer 3

相对于样式表，但我建议将URL相对于您的URL：

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

那样做，您可以在未来无需重构文件的情况下移动它们。

- Codebeef

---

前面多一个“/”有什么区别？ - Casebash

与命令行上的路径名类似，路径前面的斜杠 / 意味着它指向当前 Web 服务器上的绝对资源。 - David W. Keith

实际上，有些情况下使用相对于CSS文件的URI更好。在我的情况下，我有一个目录“/css/”，其中存放所有CSS数据。现在，我想在一个单独的文件夹中测试网站的新功能。例如，在测试文件夹中测试新的背景图片会变得很困难。这完全取决于您的需求... - Diego

绝对路径使得将解决方案放置在域的子文件夹内变得困难。支持子文件夹有许多原因。它可以更方便地进行测试（正如Diego所提到的），其中您可以在同一域中放置先前的版本/预发布版。将来的更改可能会设置企业代理服务器以支持SSO，将所有解决方案移至一个域等等。特别是在SSL方面，人们可能希望避免维护多个域名的开销。对我而言，这些考虑比“更容易移动我的.css文件”更为重要。 - Tedd Hansen

图片和其他内容都会存储在CDN上，所以这很完美。 - Muhammad Umer

Answer 4

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.css

The 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/yellow

User agents may vary in how they handle invalid URIs or URIs that designate unavailable or inapplicable resources.

来自CSS 2.1规范。

- jrista

Answer 5

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

(如果不是这样，我认为会出现问题)

- Quentin

Answer 6

可能会遇到的一个问题是，当使用css自动最小化时，似乎会出现问题。最小化包的请求路径可能与原始css的路径不同。这可能会自动发生，因此可能会引起混淆。

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

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

- mms

---

这节省了我很多时间！谢谢。应该更详细地记录它。 - mjbates7

Answer 7

尝试使用：

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

Images是一个文件夹，用来存放你想要发布的图片。

- Keshh Chiei