无法找到CSS背景图片的正确相对路径

Question

我现在正在学习HTML和CSS。但是我遇到了一个关于CSS背景图相对路径的问题。当我使用相对路径时，我的CSS中的background-image代码无法显示图片。

我正在使用ATOM代码编辑器。以下是我在HTML文件中链接CSS的代码：

<link href="resources\css\style.css" rel="stylesheet" type="text/css">

我尝试了几个相对路径，但都不起作用。

1. background-image: url('resources\building.png');
2. background-image: url('\resources\building.png');
3. background-image: url('boardway\resources\building.png');
4. background-image: url('\boardway\resources\building.png');
5. background-image: url('C:\Users\michael\gitprojects\boardway\resources\building.png');

boardway 是 resources 的父目录。 C:\Users\..\.. 是图片的绝对路径。这五个地址都无法工作。

但是当我使用 AWS 地址时，它可以正常工作：

background-image: url('https://s3.amazonaws.com/codecademy-content/programs/freelance-one/broadway/images/the-flatiron-building.png');

背景图片显示正确，所以至少我确定我的代码是正确的。但是我无法输入正确的相对路径。我该怎么办？

- CHNimitz

---

1. HTML文件的路径在哪里？
2. CSS文件的路径在哪里？

- Ehsan

CSS中的相对路径是相对于你的CSS文件的，如果你想向上访问你的层次结构，你可以使用点号。所以如果你的图片在C:\Users\michael\gitprojects\boardway\resources\building.png，而你的CSS在C:\Users\michael\gitprojects\boardway\css\styles.css，那么你的相对路径就应该是../resources/building.png。 - ippi

可能是重复的问题。https://dev59.com/ZmIj5IYBdhLWcg3wpWhx - Adharsh M

第五个路径不是相对路径，而是绝对路径。通常浏览器不允许加载绝对本地路径（安全问题），至少在让你跳过一些步骤之前是不允许的。 - ippi

Answer 1

您应该在所有url的前面加上/

url('resources/building.png');

请阅读有关URL的内容

。

- alessandrio

---

谢谢您提供的链接。我终于找到了问题所在。我认为CSS文件不知道基本/绝对URL的位置。这就是相对路径无法工作的原因。我将我的图像位置更改为C:\Users\michael\gitprojects\boardway\resources\css\images。然后，相对路径“images/building.png”就可以顺利工作了。 - CHNimitz

Answer 2

定义文件/图片/js/css等路径有两种方式：

1. 使用绝对路径
2. 使用相对路径

以下是一些示例：

相对路径

index.html
/graphics/image.png
/help/articles/how-do-i-set-up-a-webpage.html

Absolute Paths

http://www.example.com
http://www.example.com/graphics/image.png
http://www.example.com/help/articles/how-do-i-set-up-a-webpage.html

[阅读更多][1]

路径问题 1. 使用正斜杠而不是反斜杠。 2. 不要为本地系统链接文件（服务器上的路径可能不同）。

尝试根据以上内容进行更改。

[1]: #

Background-images:URL(../resources/building.png);

- Rohit Kumar

---

如果你不解释或者至少解释一下你所做的假设，那么你的回答就是毫无用处的。 - ippi

谢谢你的帮助。我终于找到了问题所在。我认为CSS文件不知道基本/绝对URL的位置。这就是为什么相对路径无法工作的原因。我将我的图像位置更改为C:\Users\michael\gitprojects\boardway\resources\css\images。然后相对路径“images/building.png”就可以顺利工作了。 - CHNimitz

Answer 3

相对路径对我有效：

    background-image:url('../images/filename.png');

- razzi383

---

“简洁明了是可以接受的，但更充分的解释会更好。” 这是在帮助中心的 如何回答问题 页面中提到的。请仔细阅读该页面，并尝试添加一些支持性信息。 - pierpy