如何使用与我的 CSS 文件不同的文件夹中的图像的相对文件路径？

Question

我有一个具有以下文件夹结构的网页：

MyWebpage
  - css
    - layout.css
  - img
    - wallpaper.jpg
  - js
  - index.html

我在 index.html

中包含以下行

<link rel="stylesheet" type="text/css" href="css/layout.css">

现在，我想使用图像 wallpaper.jpg 作为 <body> 元素的背景。我如何在这里使用相对引用？我应该找到相对于 CSS 文件的文件吗，像这样，

body {
  background: url('../img/wallpaper.jpg');
}

或者相对于HTML文件，像这样？

body {
  background: url('img/wallpaper.jpg');
}

Answer 1

这实际上取决于您在哪里编写 CSS。

如果您正在编写内联样式或在 HTML 文件中使用 <head> <style> 标记，则使用相对于 HTML 文件的路径（在此为 ../例），因为您告诉浏览器从 HTML 文件加载图像。

并且如果您在 CSS 文件中编写样式，则样式是相对于 CSS 文件目标（在这种情况下没有 ../），因为您将加载HTML 文件和 CSS 文件中的 CSS 文件将加载所有必需的资源。

How do I use relative filepaths for an image in a different folder from my CSS file?