CSS中的文件夹结构答案

【问题标题】：Folder structure in CSSCSS中的文件夹结构
【发布时间】：2012-06-16 07:09:05
【问题描述】：

谁能帮忙。

我正在刷新我对 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 文件夹中获取要显示的图像

我这样做是否正确？我在谷歌上做了一些关于引用相对路径的挖掘，但没有任何很好的例子。

谁能告诉我我哪里出了问题？

【问题讨论】：

【解决方案1】：

两个问题，首先带有url的东西应该像这样用引号引起来

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

第二个单点引用指向 css 文件所在的当前目录，因此当您使用“./Image/Logo 1.png”时，它会尝试在 CSS 文件夹中找到一个名为 image 的文件夹。您需要使用双点（“..”）在文件目录中上一级。假设您的 html 正确包含 css 文件，那应该可以解决它。

【讨论】：

【解决方案2】：

【讨论】：

【解决方案3】：

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

index.html
css
  style.css
images
  background.jpg

你的 CSS 应该是这样的：

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

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

【讨论】：

【解决方案4】：

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

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

您可能还会遇到在文件名中使用空格的问题，请尝试使用下划线 :-)

【讨论】：

【解决方案5】：

如果你的 URL 包含空格，你真的应该用引号将引用括起来，同时用 %20 替换空格字符：

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

【讨论】：