我有一个 SCSS 元素,我需要在 div 上使用 background-image 属性,但它找不到图像。 (CSS 已正确链接)。这是我的 SCSS 代码:
.coffee-icon {
background-image: url('./../img/coffee.png') no-repeat;
width: 400px;
height: 400px;
background-size:cover;
}
这是文件夹结构:
最后的一些注意事项:它不适用于“”,或者没有引号,我很确定这是路径问题,我只是不知道问题出在哪里。
最佳答案
在完美的世界中,您的 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 文件的位置并不重要,只要它们在同一域中即可。
关于html - SCSS/CSS background-image url路径问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62718645/