链接 img 与 css 文件路径问题

Question

body {
  background: url("images/bg/cloud.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

根文件夹有 css 个文件夹，里面有 index.css。根文件夹也有图像和 bg 文件夹，里面有 cloud.jpg。

当 css 位于根目录时，它工作正常。然而，一旦我将它移动到 css 文件夹中的 css 文件并通过新的 html 路径重新链接它，它就可以找到图像！我觉得 css 文件正在搜索图像文件，但找不到它。它需要转到 css 文件夹的 BACK/OUT 然后搜索 images/bg/cloud.jpg？我认为我走在正确的轨道上，如果我做 /images vs images 会有什么不同吗？并且添加 .. 是否会让我返回文件夹层次结构中的一层？

我好像可以将图像文件放在一个文件夹中，但不能将 css 文件放在文件夹中，或者我的文件路径有误？

Answer 1

这是因为相对路径。您必须添加点和斜线。就像想 css 文件想从它自己所在的地方找到图像一样。使用：

background: url("../images/bg/cloud.jpg") no-repeat center center fixed;

这应该有效。

用你说的两个点将一个文件夹移出，比如移出 /css/ 然后移入 /images/...

Answer 2

如果图像文件夹和css文件夹在根目录中。

改变这个：

background: url("images/bg/cloud.jpg") no-repeat center center fixed;

为此：

background: url("../images/bg/cloud.jpg") no-repeat center center fixed;

因为.css文件的相对路径，加上../使得文件路径回退一个文件（本例回根）。

链接 img 与 css 文件路径问题

Linking an img with css file path issue

html

css

file

background-image

filepath