Html 为什么CSS链接行为怪异？

这是我的文件结构。当我输入这样的代码时

background: url("../../images/bg-pattern-desktop.svg");

background: url("./../../images/bg-pattern-desktop.svg");

浏览器不会加载图像，但当我这样键入时

background: url("dummy-text/../../images/bg-pattern-desktop.svg");

图像已加载

---

另外，当我在vscode中遵循浏览器中不起作用的代码时，vscode会让我找到正确的位置。

我从未使用过SCS，但据我所知，VS代码中的某些组件/插件会将SCS转换为CSS，并将生成的文件uin放在~/CSS文件夹中

因此，您的CSS应该是background:url../images/bg pattern desktop.svg；，因为浏览器和VS代码应该解析相对于~/css文件夹的URL

这个URL可以理解为：从当前文件夹CSS转到它的中间父基，所以。。。然后进入image文件夹，获取名为bg-pattern-desktop.svg的文件

为什么虚拟示例也能起作用：

---

背景中的URL:urldumy text/./../images/bg-pattern-desktop.svg；还可以工作，因为相对于~/css解析的url给出了与后台相同的结果：url../images/bg pattern desktop.svg

您的SCS编译并存储在css文件夹中。正如我从文件夹结构中看到的，它应该有类似于

背景：url../images/bg-pattern-desktop.svg；

---

因为实际的css将从css文件夹中使用，而图像文件夹是css源目录之外的一个级别。

在SCSS中，我们的代码被转换为css，在HTML文件中我们链接到css文件。当涉及到图像和外部资源时，我们不能将路径链接到我们的SCSS文件，而是链接到我们的CSS文件

所以你应该使用背景：url。。。属性，该属性与CSS文件夹中的CSS文件相关

---

假设您的CSS文件就在CSS文件夹中，那么应该变成：“background:url”。/../images/bg pattern desktop.svg。

问题是您使用的路径与您可能在main.scss中导入的_响应文件相对

导入文件时，URL应与导入文件相对：

background: url("../images/bg-pattern-desktop.svg");