CSS中的文件夹结构

Question

任何人都可以帮忙。

我正在刷新我对HTML和CSS的了解（自从我使用这些语言已经4年了），我在使用文件夹结构中引用图像时遇到了问题。随附的图像显示了我的项目文件夹结构。

我想要做的是从我的CSS文件夹中的index.css文件中，使用以下代码行从我的Images文件夹中访问图像Logo 1.png，以用作背景。

body 
{
    background-color: #FFFEF0;
    background-image: url(./Images/Logo 1.png);
}

然而，这似乎不起作用，我看不到图像。我也尝试了../Images/Logo 1.png，但这也不起作用。 从我的index.html，我可以使用./Images/Logo 1.png（注意../ vs ./)

从Images文件夹中显示一个图像。

我是否以正确的方式解决这个问题？我做了一些关于引用相对路径的谷歌，但没有任何好的例子。

有人可以告诉我这里哪里出错吗？

Answer 1

如果您的网址包含空格，您应该将引用括在引号中，并将空格字符替换为%20：

background-image: url('../Images/Logo%201.png');

Answer 2

添加2个点，在文件夹中上升一级，所以如果你将图像放在一个文件夹中，然后将你的css放在另一个文件夹中，你需要上升一个级别，然后进入你的图像文件夹，例如：

background-image: url(../Images/Logo 1.png); 

您可能在使用文件名中的空格时遇到问题，请尝试使用下划线： - ）

Answer 3

如果你在css中使用image，你需要把与css文件相关的源文件放在一起，所以如果你的结构是这样的：

index.html
css
  style.css
images
  background.jpg

你的css应该像：

background: url(../images/background.jpg);

也不要在文件名中使用空格。

Answer 4

1. 使用..在目录
中上升一级
2. 引用网址（可选，但最好支持最佳的浏览器支持）
3. 不要使用空格，而是尝试使用下划线

4. 简化事情的好习惯：文件夹和文件小写，这样你不必记住案例

   background-image：url（“../ images / logo_1.png”）;

Answer 5

两个问题，首先是url的内容应该是这样的引号

background-image: url("../Image/Logo 1.png");

第二个单点引用css文件所在的当前目录，因此当你使用“./Image/Logo 1.png”时，它试图在CSS文件夹中找到一个名为image的文件夹。您需要使用双点（“..”）才能上升到文件目录中的某个级别。应该修复它，假设您的html正确包含css文件。