html - SCSS/CSS background-image url路径问题

Question

我有一个 SCSS 元素，我需要在 div 上使用 background-image 属性，但它找不到图像。 (CSS 已正确链接)。这是我的 SCSS 代码:

.coffee-icon {
    background-image: url('./../img/coffee.png') no-repeat;
    width: 400px;
    height: 400px;
    background-size:cover;
}

这是文件夹结构:

最后的一些注意事项:它不适用于“”，或者没有引号，我很确定这是路径问题，我只是不知道问题出在哪里。

Answer 1

在完美的世界中，您的 URL 路径应该是绝对的，因此始终以/引用域的基本路径开始。

你有:

background-image: url('./../img/coffee.png') no-repeat;

你应该寻找的形状是:

 background-image: url('/folder/img/coffee.png') no-repeat;
                        ^ This lead slash references the base path of the domain.

因此，上面的示例是 domain.com/folder/img/coffee.png - 您会看到前导 / 是整个 URL 的基础。

这样做的好处是您的 SCSS 或 CSS 或图像文件可以放在域结构中的任何位置。

绝对路径是成功的关键!

示例 2:

 background-image: url('/images/tea.png') no-repeat;

图片位于:

 mydomain.org/images/tea.png 

SCSS 或 CSS 文件的位置并不重要，只要它们在同一域中即可。