css - MVC 无法在 css 中使用背景 url 显示图像 - 使用捆绑

Question

我有一个具有以下结构的 MVC4 元素:

/Content/css/sprites/topbar.css

/Content/images/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，但如果我不采取这一步，那么它会像我一样工作预计。我怎样才能让这一切与我的元素结构一起工作并使用捆绑？

Answer 1

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

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

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

然后在你的 View 中 @Script.Render("/Content/css/sprites/topbar")

Mvc 将从 /Content/css/sprites/topbar?{some-crazy-token-thing} 请求您编译的 css 包