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

Posted 2023-02-23

【中文标题】MVC 无法在 css 中使用 background-url 显示图像 - 使用捆绑

【英文标题】：MVC cannot display image using background-url in css - uses bundling

【发布时间】：2012-09-03 07:17:20

【问题描述】：

我有一个 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，但如果我采取这一步，那么它会按我的预期工作。我如何才能让这一切与我的项目结构和使用捆绑一起工作？

【参考方案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 包

【参考方案2】：

我发现了问题所在。

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

【讨论】：

感谢发帖，我在更改项目文件结构后遇到了同样的问题，但不知道是什么问题。你的帖子对我帮助很大！谢谢

【参考方案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

【讨论】：

这不适用于纯 CSS 文件。 OP 可能希望查看 ASP.NET 的各种 CSS 处理程序，这些处理程序使用宏扩展 CSS 语法并支持应用程序相对路径。

谢谢，我不知道。我已经用 Razor 语法在 CSS 文件中声明变量的方法更新了我的答案。这可能行得通。

我认为我不能在 css 文件中使用 razor？

我也没有，然后我进行了谷歌搜索并找到了该页面。试试看，如果您发现它有用，请告诉我们。我也必须在我的项目中做这样的事情。我目前使用内联样式，但我会将它们放在外部文件中，然后可能会将它们压缩到一个文件中。

你在那里碰到了一些东西，我忘记了我使用捆绑/缩小似乎也影响了它，我已经更新了问题

【参考方案4】：

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

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

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

【讨论】：

我的应用程序并不总是根网站，它可能是站点内的 Web 应用程序。奇怪的是，无论 url 很长，使用 '../../images/topbar.png' 都不起作用

我已经更新了问题，因为我忘记了我使用了捆绑/缩小