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

问题描述：

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

I am studying HTML and CSS right now. And I got issue about relative paths of CSS background-image. My background-image code under CSS doesn't show image when I use relative path.

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

I am using ATOM code editor. here is the CSS linked code in my HTML file.

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

我尝试了几条相对路径，一切都不起作用

I try several relative paths, all doesn't work

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'）;

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 是资源的父目录。 C：\ Users \..\ .. 是图像的绝对路径。所有五个地址都不起作用。

boardway is parent directory of resources. C:\Users\..\.. is absolute path of image. All five address don't work.

但当我使用AWS地址

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

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

The background picture are showing correctly. So at least I can sure my code is correct. But I failed to input a correct relative path. What I can do?

答

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

There are 2 ways for defining path for a file/image/js/css etc.

使用绝对路径

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]

[Read More][1]

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

Issue with your paths 1. Use forward slash instead of a backward slash. 2. Never link file for local systems (Path on the server might differ).

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

Try to make changes accordingly as per above.

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

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

相关推荐