MVC无法在css中使用background-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中使用相对路径。关键是将捆绑包注册到您的实际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}

请求您编写的css包

Answer 2

我发现了问题所在。

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

Answer 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

Answer 4

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

如果您的应用程序始终位于网站的根目录中，您可以使用根相对路径（例如background-image：url（“/ content / images / toopbar.jpg”）;）

嗯，但是“../ images/topbar.png”也应该有效。你试过了吗？