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

【问题标题】：can't find correct relative paths of CSS background-image找不到 CSS 背景图像的正确相对路径
【发布时间】：2017-05-27 02:55:16
【问题描述】：

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

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

【问题讨论】：

1) html 路径在哪里？ 2）路径css在哪里？
CSS 中的相对路径是相对于你的 CSS 文件的，如果你想在你的层次结构中向上走，你可以使用点。所以如果你的图片在C:\Users\michael\gitprojects\boardway\resources\building.png，而你的css在C:\Users\michael\gitprojects\boardway\css\styles.css，那么你的相对路径就是../resources/building.png
可能重复。 stackoverflow.com/questions/20047364/…
第五个不是相对路径，是绝对路径。并且浏览器通常不允许您加载绝对本地路径（安全问题），至少在不让您先跳过箍的情况下是这样。

【解决方案1】：

你应该把/所有的url的

url('resources/building.png');

【讨论】：

感谢您发布的链接。我终于找到了问题所在。我认为 css 文件不知道基本/绝对 URL 在哪里。这就是为什么相对路径不起作用的原因。我将图像位置更改为 C:\Users\michael\gitprojects\boardway\resources\css\images。相对路径“images/building.png”工作顺利

【解决方案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);

【讨论】：

如果你不解释它或至少解释你所做的假设，你的答案是没有用的。
感谢您的帮助。我终于找到了问题所在。我认为 css 文件不知道基本/绝对 URL 在哪里。这就是为什么相对路径不起作用的原因。我将图像位置更改为 C:\Users\michael\gitprojects\boardway\resources\css\images。然后相对路径“images/building.png”工作顺利