asp.net - 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

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

附言如果这很重要，我正在使用无点(更少的 css)。换句话说，所有的 .css 实际上都是 .less。

附言这是 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");
}

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

编辑: 我最初用 ../ 而不是正确的 / 来引用根文件夹。