在 Visual Studio 代码中感到愚蠢 - 无法将图像或字体从我的文件加载到我的 CSS sheet

Question

显然我做错了什么（仅供参考，全新）。我尝试使用我计算机上加载的字体作为我的 CSS 样式表（我的 VSC 中的字体文件）不。尝试使用 img 作为我文件的背景。没有。

我尝试了以下方法：（仅作为 img 选项的示例）所以我正在尝试为我的 < body > 标签设置我的背景

With Relative Path:（从右键单击文件复制并 select "copy relative path"

body {
    background-image: url(img\tire background.jpg);
}

/* 还进行了各种格式化，以确保它不会丢失在某处或丢失 large/small*/

body {
    background-image: url(..\img\tire background.jpg);
}  

body {
    background-image: url('..\img\tire background.jpg');
}  

body {
    background-image: url('img\tire background.jpg');
}

还有完整路径：（同样的方法，右击select "copy path"）

body {
    background-image: url(C:\Users\BradJen\Desktop\Big Toyz Coding Project 1\big-toyz\img\tire background.jpg);
}

（引号、格式等的所有变体）

当我从网上获取它或在我的 HTML 中使用它时，它会起作用。和我的字体一样。我可以使用 google 字体，但不能使用我文件夹中的字体。奇怪的是，它曾经工作过一次，但在我在我的 HTML 文档中将图像放在它上面后图像消失了。

我有 google 一堆，但作为新手，大多数技术解释都超出了我的理解范围，或者无法解决我的问题。我知道这可能是非常简单和荒谬的事情。在此先感谢任何人！

Answer 1

首先需要将文件名中的space转义。此外，您要查找的路径是相对于调用 CSS 的。

假设您有以下设置：

我正在从我的 index.html.

链接到 css/style.css 中的 CSS

<link rel="stylesheet" href="css/style.css" />

我想在body中使用kitten image.jpg（注意文件名中的space）。

来自css/style.css：

body {
  background: url("../kitten\ image.jpg") 0 0 transparent no-repeat;
}

但是，在这种情况下更典型的做法是使用破折号或下划线以避免需要转义 spaces。

在 Visual Studio 代码中感到愚蠢 - 无法将图像或字体从我的文件加载到我的 CSS sheet

Feeling dumb in Visual Studio Code- Can't load img or font from my files to my CSS sheet

css

fonts

image