找不到正确的 CSS background-image 相对路径

Question

我现在正在学习 HTML 和 CSS。我遇到了关于 CSS 背景图像的相对路径的问题。当我使用相对路径时，CSS 下的背景图像代码不显示图像。

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

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

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

background-image: url('resources\building.png');
background-image: url('\resources\building.png');
background-image: url('boardway\resources\building.png');
background-image: url('\boardway\resources\building.png');
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');

背景图片显示正确。所以至少我可以确定我的代码是正确的。但是我没有输入正确的相对路径。我可以做什么？

Answer 1

你应该把/所有的网址

url('resources/building.png');

Answer 2

有两种方法可以定义文件/图像/js/css 等的路径。

2 .使用相对路径

下面是几个例子

相对路径

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

绝对路径

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. 不要为本地系统链接文件（服务器上的路径可能不同）。

尝试按照上述进行相应的更改。

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