背景图像 url() 在实时服务器上有效，但当我在浏览器中打开 index.html 时却不起作用？

由于其他属性适用，因此正确选择了该元素。没有控制台错误。

我努力了：

1. img/英雄.jpg- 当我点击 VS Code 中的链接时有效
2. /img/英雄.jpg- 当我点击时起作用
3. ../../英雄.jpg- 当我点击时工作
4. ../img/英雄.jpg- 不起作用
5. 完整路径- 当我点击时起作用

The problem https://i.stack.imgur.com/G1n33.png在这里看到。您可以看到 src 属性调用的图像起作用了。

这是文件结构。 https://i.stack.imgur.com/uwPxg.png

老实说，我不明白你的设置/问题，但我认为如果你了解相对 URL 的工作原理更好一点，你就可以自己弄清楚。

在你的服务器上，你的文件位于类似的地方，

/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png

在您的计算机上，您的文件位于类似以下位置的位置：

C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png

在你的 styles.css 中你有这样的东西，

body {
    background-image: url('/img/background.png');
}

网址开头为/告诉浏览器将其解释为根目录。在 Windows PC 上，它将是C:\在 Linux PC 上，它将是/.

但是，当您通过以下网址访问该页面时：https://example.com，根目录变为https://example.com/.

因此，使用/img/background.png会让它在以下位置查找图像https://example.com/img/background.png一旦它在线，但在您的本地计算机上，它将在以下位置查找图像C:\img\background.png

像这样开始不带斜杠的网址，img/background.png查找相对于 css 文件所在文件夹的图像。因此，在这种情况下，它会在线查找背景：https://example.com/css/img/background.png在你的本地机器上它会查找C:\Users\Nani\Desktop\Website\css\img\background.png

在我的示例中，最好的解决方案是使用../img/background.png，这将查找相对于 css 文件夹的一个目录，然后在 img 文件夹中查找。这将在您自己的计算机上以及上传后一致地工作。

假设问题出在 url 路径的声明方式上，这应该足以弄清楚您需要做什么。否则，问题可能出在其他方面。例如，您似乎正在使用 SCSS。也许 SCSS 没有在您的本地计算机上编译（或者有一段时间没有编译），但它是在实时服务器上编译的？