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

例子：

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

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

解决方案

万一我们不知道可以这样做...

如果在CSS中提供资源的相对路径，则它是相对于CSS文件而不是相对于包含CSS的文件的路径。

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

因此，这可能对我们有用。

在.css文件中，我们可以使用相对路径；因此，在示例中，假设我们将CSS文件放入〜/ Styles / mystyles.css中。我们可以使用url(../ Images / Test.gif)作为示例。

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

我唯一能找到的就是对http://www.west-wind.com/weblog/posts/269.aspx的评论，但是，老实说，我还没有使它生效。如果我愿意，我将编辑此评论：

re: Making sense of ASP.Net Paths by
  Russ Brooks February 25, 2006 @ 8:43
  am
  
  No one fully answered Brant's question
  about the image paths inside the CSS
  file itself. I've got the answer. The
  question was, "How do we use
  application-relative image paths
  INSIDE the CSS file?" I have long been
  frustrated by this very problem too,
  so I just spent the last 3 hours
  working out a solution.
  
  The solution is to run your CSS files
  through the ASPX page handler, then
  use a small bit of server-side code in
  each of the paths to output the root
  application path. Ready?
  
  
  Add to 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>

Inside your CSS, use the Request.ApplicationPath property
  wherever a path exists, like this:
  
  #content {
  background: url(<%= Request.ApplicationPath
  %>/images/bg_content.gif) repeat-y;
  }
  .NET serves up ASPX pages with a MIME type of "text/html" by default,
  consequently, your new server-side CSS
  pages are served up with this MIME
  type which causes non-IE browsers to
  not read the CSS file correctly. We
  need to override this to be
  "text/css". Simply add this line as
  the first line of your CSS file:

<%@ ContentType="text/css" %>

我在获取要显示在内容容器中的背景图像时遇到了困难，并且尝试了许多与此处发布的其他解决方案相似的解决方案。我已经在CSS文件中设置了相对路径，在aspx页面上将其设置为样式，我希望背景不显示任何内容。我尝试了Marcel Popescu的解决方案，但仍然无法正常工作。

经过Marcel的解决方案和反复试验的结合，我最终使它能够正常工作。我将代码插入到web.config中，将text / css行插入到我的CSS文件中，但是我完全删除了CSS文件中的background属性，并将其设置为我希望背景显示在aspx页面中的内容容器上的样式展示。

这确实意味着，对于我要显示背景的每个页面，我都需要设置样式background属性，但是它的工作原理很漂亮。

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

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

请改用以下内容。

background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);

在Windows 7上，IIS 7.5：

我们不仅必须执行Marcel Popescu提到的步骤。

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

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

使生活变得轻松，只需将CSS中使用的图像放在/css/style.css旁边的/ css /文件夹中即可。然后，当我们引用图像时，请使用相对路径(例如，" url(images / image.jpg)")。

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