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

0s7z1bwu 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(345)

我现在正在学习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');

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

3条答案

你应该把/所有的网址

url('resources/building.png');

有两种方法可以定义文件/image/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

[Read更多][1]
你的路径问题1.使用正斜杠代替反斜杠。2.不要为本地系统链接文件（服务器上的路径可能不同）。
尝试根据上述内容进行相应的更改。

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

相对路径对我有效：

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