css - 浏览器如何在 CSS 中定位背景图片？

Question

我试图找出为什么没有出现背景图像。

默认情况下，浏览器是否在与样式表或调用样式表的脚本相同的文件夹中查找引用的图像？

前任。
脚本是 /foo/bar.html 样式表是 /css/site.css

site.css 包含：

.header {background-image: url(beautiful.png);}

浏览器是否需要 /foo 或 /css 中的文件 beautiful.png？

另外，是否可以使用 webroot 引用此图像？前任：

(file in /images/styles/)
.header {background-image: url(/images/styles/beautiful.png);}

Answer 1

它与样式表相关，而不是文档：

为了创建不依赖于资源绝对位置的模块化样式表，作者可以使用相对 URI。相对 URI（如 [RFC3986] 中定义）使用基本 URI 解析为完整 URI。RFC 3986 第 5 节定义了此过程的规范算法。对于 CSS 样式表，基本 URI 是样式表的，而不是源文档的。

根相对路径（前导斜杠）很好，我通常使用。