CSS中的文件夹结构

Posted 2023-02-23

【中文标题】CSS中的文件夹结构

【英文标题】：Folder structure in CSS

【发布时间】：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 文件夹中获取要显示的图像

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

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

【问题讨论】：

看图哈哈：P 为什么不用打印屏幕？

只是一条评论 - ./ 引用同一个文件夹，../ 引用父文件夹

哈哈是的，照片是 OLD SKOOL 拍摄的。尝试打印屏幕，但由于某种原因无法与我的编辑器一起使用

【参考方案1】：

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

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

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

【讨论】：

不一定需要引号：***.com/questions/851724/…

【参考方案2】：

使用 .. 在目录中上一级 引用 url（可选，但建议最好的跨浏览器支持） 不要使用空格，尝试使用下划线

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

背景图片：url("../images/logo_1.png");

【参考方案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');

【讨论】：

网址不能包含空格，应替换为%20

%20 并不总是必要的。如果将 Url 放在单引号或双引号中，空格会自动在 %20

中进行 URL 编码