4

任何人都可以请帮忙。

我正在刷新我对 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 从 Images 文件夹中获取要显示的图像（注意 ../ vs ./）

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

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

4

5 回答 5

5

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

background-image: url('../Images/Logo%201.png');
于 2012-06-13T10:31:29.460 回答
1

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

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

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

于 2012-06-13T10:33:07.760 回答
1

如果您在 css 中使用图像，则需要放置与 css 文件相关的源文件，所以如果您的结构如下：

index.html
css
  style.css
images
  background.jpg

你的CSS应该是这样的：

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

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

于 2012-06-13T10:33:42.487 回答
1
  1. 使用 .. 在目录中上一级
  2. 引用 url（可选，但建议最好的跨浏览器支持）
  3. 不要使用空格，请尝试使用下划线

  4. 简化事物的好习惯：文件夹和文件小写，这样您就不必记住大小写

    背景图像：url（“../images/logo_1.png”）；

于 2012-06-13T10:33:53.070 回答
0

两个问题，首先带有 url 的东西应该在这样的引号中

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

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

于 2012-06-13T10:39:18.843 回答