css - 为开发和生产设置背景图像路径的正确方法？

Question

我只是想给我的 html 一个 CSS 背景图片。

我试过这样设置:

html {background-image: url('/assets/background.jpg')}

它在开发中起作用，但是当 Assets 被编译到 Public 文件夹中时，它不再是正确的路径。这:

html {background-image: url('background.jpg')}

甚至不用于开发。

我很困惑，因为似乎没有人遇到过同样的问题，但这似乎应该是一个很常见的问题。

任何光棚将不胜感激。

Answer 1

如果你的文件夹结构是这样的

/css
/js
/img

在大多数情况下，css 和图像将位于它们单独的文件夹中，因此您需要使用 ../ 返回一个文件夹，这意味着它将返回一个文件夹，因此正确的 CSS 属性将是,

html {background-image: url('../img/background.jpg')}

这将适用于所有情况和服务器，除非您更改文件夹结构。

如果你的 css 和图像都在同一个文件夹中，你可以写

html {background-image: url('background.jpg')}

有关更多信息，请参阅此线程:How to go up a level in the src path of a URL in HTML?

CSS- 技巧博客 - Quick Reminder About File Paths