CSS中的图像路径

Question

我正在使用一些 CSS 框架并尝试显示图标（使用具有 background-image 属性的类选择器）。可以说，我的文件结构是：

Content / site.css
Content / Folder1  / framework.css
Content / Folder1  / Folder2       / framework-images.css
Content / Folder1  / Folder2       / framework-icon1.png

site.css 看起来像：

@include "Folder1/framework.css";
...

framework.css 喜欢：

@include "Folder2/framework-images.css";
...

framework-images.css 是：

.selector {
    background-image: url("icon1.png");
}

但是当我试图添加到我的 html 元素类“选择器”时，Firefox 开发工具显示它试图从这里加载图标：

http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png

虽然正确的路径是（我是对的吗？）：

~/Content/Folder1/Folder2/icon.png

或者只是

http://localhost:1234/Content/Folder1/Folder2/icon.png

那么哪里会出错呢？如何告诉客户端使用正确的路径？

附：如果重要的话，我正在使用 dotless (Less css)。换句话说，所有的.css实际上都是.less。

P.P.S.这是 ASP.NET MVC4 应用程序。

更新： 正如@djfarrelly 指出的那样，问题出在 background-image: url(...) 中的路径不正确。我已将其更改为：

background-image: url("/Content/Folder1/Folder2/Icon1.png");

它开始工作了。 但我还是很困惑。谁能解释为什么没有完整路径指定它不能工作？

Answer 1

您对图像的所有引用都应引用您网站中的根文件夹，以避免混淆。您是否尝试将您的 css 更改为从根目录引用：

.selector {
    background-image: url("/Content/Folder1/Folder2/icon1.png");
}

如果您包含应该清理它的/。

编辑： 我最初用../ 而不是正确的/ 发布这个来引用根文件夹。