html - 如何在本地环境中通过 CSS 显示图像？

Question

这很尴尬。我正在学习新事物，但令我惊讶的是我自己无法解决这个问题。

在我的桌面上，我有一个名为 Test 的文件夹，其中有 index.html 和一个名为 CSS 的文件夹，其中包含 index.css 和另一个名为带有名为 logo.png 的图像的图像。

在我的 index.css 文件中，我有以下行:

background: url("images/logo.png") no-repeat;

使用上面的行我无法在本地显示图像。我尝试使用 /images 和 test/images 但它不起作用。如果我在本地查看它，如何显示它？

Answer 1

正如您所提到的，您的根文件夹 Test 中有不同的 CSS 和图像文件夹。由于您正在为 CSS 文件中的 background 编写代码:

案例一:

background:url("logo.png");

将在 CSS 文件夹中搜索您的图像。

---

案例2:

background:url("images/logo.png");

将首先在 CSS 文件夹中搜索 images 文件夹，然后在 images 文件夹中搜索 logo.png。 (但是您的 CSS 文件夹中没有图像文件夹)。

---

案例3:

background: url("../images/logo.png") no-repeat;

在这种情况下，.. 将带您回到主目录(即从 css 文件夹到您的根目录 forder Test。然后 /images 将带您进入 images 文件夹，它会找到 /logo.png 作为图像的路径。)