5

我有一个 MVC4 项目，其结构如下：

/Content/css/sprites/topbar.css

/内容/图像/topbar.png

在 css 文件中，我尝试使用以下方法引用图像：

background: url('../../images/topbar.png')

但是图像不显示。如果我更改它以使图像位于：

/Content/css/sprites/topbar.png

并将css更改为：

background: url('content/css/sprites/topbar.png')

它有效，但这破坏了我的项目结构。

有任何想法吗？

编辑

我没有提到其他东西，因为我认为它不相关，但它似乎会影响这一点！

我曾经@System.Web.Optimization.Styles.Render("~/MainStyles")捆绑和缩小 css，但如果我采取这一步，那么它会按我的预期工作。我如何让这一切与我的项目结构和使用捆绑一起工作？

4

4 回答 4

8

不知道有没有其他人遇到这个问题。但是你可以在你的 CSS 中使用相对路径。关键是使用虚拟路径注册捆绑包，该路径指向您的实际 css 所在的同一文件夹。这样，MVC 将从该路径中的处理程序请求捆绑的 css。

尝试将您的捆绑注册更改为：

bundles.Add(new StyleBundle("~/Content/css/sprites/topbar")
              .Include("~/Content/css/sprites/topbar.css")
            );

那么在你看来@Script.Render("/Content/css/sprites/topbar")

Mvc 将从/Content/css/sprites/topbar?{some-crazy-token-thing}

于 2013-05-26T07:41:33.377 回答
5

我发现了问题所在。

这确实是 MVC 中使用的捆绑和缩小。当 css 查找图像时，它正在查找我的包指向的文件夹作为当前文件夹，而不是 css 文件所在的文件夹。

于 2012-09-10T13:18:06.637 回答
3

尝试使用：

.social ul li a.blog { background: url(@Url.Content("~/Content/img/houseIcon.png")) no-repeat left top; }

要在 CSS 中使用 razor，请参阅此http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine

于 2012-09-10T12:15:09.983 回答
1

我建议将 CSS 引用的图像存储在与 CSS 文件本身相同的文件夹或目录的子文件夹中，这样您就可以在 CSS 文件中使用最短长度的相对路径。

如果您的应用程序始终驻留在网站的根目录中，您可以使用根目录相对路径（例如 background-image: url("/content/images/toopbar.jpg"); ）

嗯，但是“../images/topbar.png”也应该可以工作。你试过吗？

于 2012-09-10T12:15:07.680 回答