25

假设我的应用程序根目录下有一个“图像”文件夹目录。如何从 .css 文件中使用 ASP.NET 应用程序相对路径引用此目录中的图像。

例子：

在开发中，~/Images/Test.gif的路径可能会解析为/MyApp/Images/Test.gif，而在生产中，它可能会解析为/Images/Test.gif（取决于应用程序的虚拟目录） . 显然，我希望避免在环境之间修改 .css 文件。

我知道您可以使用 Page.ResolveClientUrl 在渲染时动态地将 url 注入控件的 Style 集合中。我想避免这样做。

4

8 回答 8

11

不幸的是，Firefox 在这里有一个愚蠢的错误......路径是相对于页面的路径，而不是相对于 CSS 文件的位置。这意味着如果您在树中的不同位置有页面（例如在根目录中有 Default.aspx，在 View 文件夹中有 Information.aspx），则无法获得有效的相对路径。（IE 将正确解析相对于 CSS 文件位置的路径。）

我唯一能找到的是关于http://www.west-wind.com/weblog/posts/269.aspx的评论，但老实说，我还没有成功。如果我这样做，我将编辑此评论：

回复：理解 ASP.Net 路径，Russ Brooks 2006 年 2 月 25 日上午 8:43

没有人完全回答 Brant 关于 CSS 文件本身内部图像路径的问题。我已经得到了答案。问题是，“我们如何在 CSS 文件中使用应用程序相关的图像路径？” 我也一直对这个问题感到沮丧，所以我花了最后 3 个小时来制定解决方案。

解决方案是通过 ASPX 页面处理程序运行您的 CSS 文件，然后在每个路径中使用少量服务器端代码来输出根应用程序路径。准备好？

  1. 添加到 web.config：
 <compilation debug="true">
 <!-- Run CSS files through the ASPX handler so we can write code in them. -->
 <buildProviders>
 <add extension=".css" type="System.Web.Compilation.PageBuildProvider" />
 </buildProviders>
 </compilation>

 <httpHandlers>
 <add path="*.css" verb="GET" type="System.Web.UI.PageHandlerFactory" validate="true" />
 </httpHandlers>

  1. 在 CSS 中，只要存在路径，就使用 Request.ApplicationPath 属性，如下所示：

    #content { 背景： url(<%= Request.ApplicationPath %>/images/bg_content.gif) 重复-y; }

  2. .NET 默认使用 MIME 类型“text/html”提供 ASPX 页面，因此，您的新服务器端 CSS 页面使用此 MIME 类型提供，这会导致非 IE 浏览器无法正确读取 CSS 文件。我们需要将其覆盖为“text/css”。只需将此行添加为 CSS 文件的第一行：

    <%@ ContentType="text/css" %>
于 2009-01-14T09:21:33.680 回答
8

如果你不知道你可以这样做......

如果你在 CSS 中给出资源的相对路径，它是相对于 CSS 文件的，而不是包含 CSS 的文件。

background-image: url(../images/test.gif);

所以这可能对你有用。

于 2008-09-18T02:19:24.333 回答
6

让您的生活更轻松，只需将 CSS 中使用的图像/css/放在/css/style.css. 然后，当您引用图像时，请使用相对路径（例如url(images/image.jpg)）。

我仍然将用 a 显示的图像保存<img>在/images/文件夹中。例如照片是内容，它们不是网站皮肤/主题的一部分。因此，它们不属于该/css/文件夹。

于 2010-11-30T23:55:37.287 回答
3

将您的动态 CSS 放在 .ascx 文件中的用户控件中，然后您不需要通过 asp.net 页面处理器运行所有 css 文件。

<%@ Control %>
<style type="text/css>
div.content
{
background-image:(url(<%= Page.ResolveUrl("~/images/image.png") %>);
}
</style>

但解决~问题的最简单方法是根本不使用 a ~。在 Visual Studio 的解决方案资源管理器中，右键单击您的应用程序，选择属性窗口并将虚拟路径更改为/.

于 2012-01-25T14:42:51.003 回答
3

Marcel Popescu 的解决方案是在 css 文件中使用 Request.ApplicationPath。

永远不要使用 Request.ApplicationPath - 它是邪恶的！根据路径返回不同的结果！

请改用以下内容。

background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);
于 2010-06-22T15:45:52.137 回答
1

在 Windows 7、IIS 7.5 上：

您不仅需要执行 Marcel Popescu 提到的步骤。

您还需要在 IIS 7.5 处理程序映射中添加处理程序映射。这样 IIS 就知道 *.css 必须与 System.Web.UI.PageHandlerFactory 一起使用

仅在 web.config 文件中设置内容是不够的。

于 2010-10-23T03:07:08.093 回答
-3

在 .css 文件中，您可以使用相对路径；所以在你的例子中，假设你把你的 css 文件放在 ~/Styles/mystyles.css 中。您可以使用 url(../Images/Test.gif) 作为示例。

于 2008-09-18T02:19:44.927 回答
-4

我很难为内容容器显示背景图像，并且尝试了许多与此处发布的其他解决方案类似的解决方案。我已经在 CSS 文件中设置了相对路径，将其设置为我希望背景显示的 aspx 页面上的样式 - 没有任何效果。我尝试了 Marcel Popescu 的解决方案，但仍然没有用。

在结合了 Marcel 的解决方案和反复试验后，我确实最终让它工作了。我将代码插入到 web.config 中，将 text/css 行插入到我的 CSS 文件中，但我完全删除了 CSS 文件中的背景属性，并将其设置为我想要背景的 aspx 页面中内容容器上的样式展示。

这确实意味着对于我想要显示背景的每个或任何其他页面，我都需要设置样式背景属性，但它工作得很好。

于 2010-05-13T02:05:27.763 回答