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

Question

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

我正在使用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');

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

Answer 1

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

1. 使用绝对路径

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);

Answer 2

你应该/所有网址

url('resources/building.png');

Please read about URLs