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

【问题标题】：How do I use relative filepaths for an image in a different folder from my CSS file?如何对与我的 CSS 文件不同文件夹中的图像使用相对文件路径？
【发布时间】：2016-12-24 20:07:34
【问题描述】：

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

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');
}

【问题讨论】：

@K.Daniek 没有。第一种解决方案是正确的（假设 css 规则位于 css 文件中）。

标签： css filepath relative-path

【解决方案1】：

这真的取决于你在哪里编写 CSS。

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

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

【讨论】：