使用CSS查找相对路径

Question

我正在使用Jekyll关注响应式网站的教程。 我正在处理标题，我正在尝试使用图像作为标题的背景，但我有问题找到此图像的相对路径。

这是我计算机中图像的路径：/Users/CaroleCarlos/Pictures/60H.png

和 这是文件夹的路径我正在保存我的项目：/ Users / CaroleCarlos / Desktop / DevTips-Starter-Kit-Jekyll-Starter-Kit

我正在使用以下代码将图像设置为使用sass的背景：

header {
  height: 450px;
  background: url(../Pictures/60H.png);
}

但我不行。我也尝试了另一条路径，但我不知道我做错了什么，我找不到图像。 我正在使用Expresso作为我的文本编辑器。

我知道解决这个问题并不困难，但我一直试图让它工作一段时间，我无法理解。

Answer 1

您需要返回两个目录，如下面的代码所示。 ../是相对路径中每个目录级别的填充程序。

header {
  height: 450px;
  background: url(../../Pictures/60H.png);
}

Answer 2

我会建议你将你的项目放在文件夹中以防止这种情况发生。

你应该创建一个像这样的文件夹图像：/ Users / CaroleCarlos / Desktop / DevTips-Starter-Kit-Jekyll-Starter-Kit / images

那么你的路径应该是{{1}}