可以使用URL链接到background-image，但不能在根目录中链接到background-image

Question

这个问题一直让我神经紧张。

我有一段代码片段可以使用：

body {
    background-image: url("http://i.imgur.com/uN8yFlU.png");
    background-repeat: repeat;
}

这个没有：

body {
    background-image: url("/resources/navbar-bg.png");
    background-repeat: repeat;
}

这两个代码块之间的唯一区别是我引用背景图像的方式。前者使用URL，后者引用root / resources目录中的文件。

我的根目录是

• 的index.html
• 资源
• CSS
• 等

Answer 1

所有内容都取决于这些行所在的位置，因为它相对于当前文件：

background-image: url("resources/navbar-bg.png");

如果您的CSS位于http://example.com/styles.css，则会搜索http://example.com/resources/navbar-bg.png。

如果您的CSS位于http://example.com/theme/styles.css，则会搜索http://example.com/theme/resources/navbar-bg.png。

如果要引用根目录中的文件，只需将路径放在斜杠中：

background-image: url("/resources/navbar-bg.png");