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

Question

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

我努力了：

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

问题就在这里可见。您可以看到 src 属性调用的图像起作用了。

这是文件结构。

Answer 1

老实说，我不明白你的设置/问题，但我认为如果你了解相对 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');
}

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

但是，当您通过类似 的 url 在线访问该页面时https://example.com，根目录将变为https://example.com/。

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

像这样开始不带斜线的 url，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 没有在您的本地计算机上编译（或者有一段时间没有编译），但它是在实时服务器上编译的？