具有相对图像路径的外部CSS文件是否引用外部图像？

Question

在 domain1.com 上，我有一个简单的html页面：

<h1 class="hello-world">Hello World!</h1>

此页面引用 domain2.com 上托管的外部 CSS文件。使用相对路径引用该CSS文件中的所有图像。 E.g：

h1.hello-world {
background-image:url(/images/cute-kitten.gif);
}

当我在domain1上加载页面时，浏览器会尝试引用图像'domain1.com/images/cute-kitten.gif'或'domain2.com/images/cute -kitten.gif'？

结果是相同的所有（当前）浏览器？

Answer 1

根据CSS Level 2 specification document，相对URI总是使用包含路径的样式表的URI来解析。

  

为了创建不依赖于的模块化样式表   作者可以使用相对URI来绝对定位资源。 [...]   对于CSS样式表，基本URI是样式表的URI，而不是   源文件的内容。

因此，它始终会在所有浏览器上解析为http://domain2.com/images/cute-kitten.gif。

Answer 2

根据CSS spec：

  

部分URL相对于样式的来源进行解释   表格，与文件无关

在您的示例中，URI将导致domain2.com/images/cute-kitten.gif。