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文件文件将加载所有必需的资源。