将 img 与 css 文件路径问题相关联答案

【问题标题】：Linking an img with css file path issue将 img 与 css 文件路径问题相关联
【发布时间】：2016-03-28 03:41:17
【问题描述】：

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。根文件夹也有 images 和 bg 文件夹，里面有 cloud.jpg。

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

似乎我可以将图像文件放在文件夹中，但不能将 css 文件或我的文件路径错误？

【问题讨论】：

标签： html css file background-image filepath

【解决方案1】：

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

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

这应该可行。

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

【讨论】：

【解决方案2】：

如果 images 文件夹 和 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？这是回购的链接，非常感谢任何帮助！ github.com/bencasalino/bencasalino.github.io
正如您在此处看到的jsfiddle.net/vkavj6t8，您正确使用了背景。我会看看你的代码，给我一分钟。
@BenjaminCasalino 您有两个 index.css 文件（一个在根目录中，一个在 css 文件夹中）您更新了根目录中的 index.css。您需要更新 css 文件夹 中的 index.css。
是的，我仍然从旧的 css 文件链接，而不是 css 文件夹中的新文件！！