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

Question

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

我尝试将其设置为：

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

用于开发，但是当资产被编译到 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?

Correct way to set a background image path for development and production?