0

我正在使用一些 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";
...

框架图像.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

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

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

PPS 这是 ASP.NET MVC4 应用程序。

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

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

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

4

1 回答 1

4

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

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

如果你包括/应该清理它。

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

于 2012-12-14T18:22:23.413 回答