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

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

P.S。如果重要的话我使用无点（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");
}

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

修改我最初发布此w / ../而不是正确的/来引用根文件夹。

CSS中的图像路径

1 个答案: