在.css文件参考的应用程序相对虚拟路径 [英] Reference app relative virtual paths in .css file

问题描述

假设我有我的应用程序的根目录下的图片文件夹目录。我怎样才能从.css文件中，使用ASP.NET应用程序的相对路径在此目录中引用的图像。

例如：

在开发中，〜/图片的路径/ Test.gif 可能会解决为 /MyApp/Images/Test.gif 同时，在生产中，它可能会解决为 /Images/Test.gif （取决于应用程序的虚拟目录）。我，很明显，希望避免不必修改环境之间的的CSS文件。

我知道你可以在渲染时使用Page.ResolveClientUrl注入一个URL到控件的样式集动态。我想避免这样做。

解决方案

不幸的是Firefox有一个愚蠢的错误......这里的路径是相对的，而不是被相对CSS文件的位置到页面的路径。如果你有树的不同位置（如在查看文件夹的根目录和Information.aspx有Default.aspx的）有没有办法让工作相对路径的页面，这意味着。 （IE会正确地解决相对于CSS文件的位置的路径。）

我能找到的唯一的事情就是在 HTTP此评论：// WWW。 west-wind.com/weblog/posts/269.aspx 但是，说实话，我没有设法使其工作还没有。如果我这样做，我会编辑这条评论：

  

重：通过ASP.Net路径感
  拉斯·布鲁克斯2006年2月25日，@ 8时43分
  我

  
  

没有人完全回答布兰特的问题
  关于CSS的内部的图像的路径
  文件本身。我已经得到了答案。该
  问题是，我们如何使用
  应用程序相对图像路径
  里面的CSS文件？长期以来，我一直
  这个很沮丧的问题也一样，
  所以我只花了过去3小时
  工作了一个解决方案。

  
  

解决方案是运行CSS文件
  通过ASPX页面的处理程序，然后
  使用服务器端code小位
  每个路径输出根
  应用程序的路径。准备好了吗？

  
  

  
1. 添加到web.config中：

  

 ＆LT;编译调试=真正的＆GT;
 ＆LT;！ - 通过ASPX处理器运行CSS文件，所以我们可以把它们写code。 - ＆GT;
 ＆LT; buildProviders＆GT;
 ＆LT;添加扩展= TYPE =System.Web.Compilation.PageBuildProvider/＆GT的CSS。
 ＆LT; / buildProviders＆GT;
 ＆LT; /编译＆GT; ＆LT;＆HttpHandlers的GT;
 ＆LT;添加路径=* CSS。动词=GETTYPE =System.Web.UI.PageHandlerFactory验证=真正的/＆GT;
 ＆LT; / HttpHandlers的＆GT;
 

  

  

1. 在你的CSS，使用Request.ApplicationPath属性
     只要存在路径，如：

   
     
     

   ＃内容{
     背景：网址（＆LT;％= Request.ApplicationPath
     ％> /图像/ bg_c​​ontent.gif）重复-Y;
     }


  

2. .NET提供了默认的MIME类型为text / html的的ASPX页面，
     因此，新的服务器端CSS
     页供应了这个MIME
     这将导致非IE浏览器的类型
     不能正确读取CSS文件。我们
     需要重写这是
     文/ CSS。只需添加此行
     你的CSS文件的第一行：

    ＆LT;％@的ContentType =文/ CSS％GT;
    


  

Assume I have an "images" folder directory under the root of my application. How can I, from within a .css file, reference an image in this directory using an ASP.NET app relative path.

Example:

When in development, the path of ~/Images/Test.gif might resolve to /MyApp/Images/Test.gif while, in production, it might resolve to /Images/Test.gif (depending on the virtual directory for the application). I, obviously, want to avoid having to modify the .css file between environments.

I know you can use Page.ResolveClientUrl to inject a url into a control's Style collection dynamically at render time. I would like to avoid doing this.

解决方案

Unfortunately Firefox has a stupid bug here... the paths are relative to the path of the page, instead of being relative to the position of the CSS file. Which means if you have pages in different positions in the tree (like having Default.aspx in the root and Information.aspx in the View folder) there's no way to have working relative paths. (IE will correctly solve the paths relative to the location of the CSS file.)

The only thing I could find is this comment on http://www.west-wind.com/weblog/posts/269.aspx but, to be honest, I haven't managed to make it work yet. If I do I'll edit this comment:

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?

1. 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>

1. 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; }

2. .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文件参考的应用程序相对虚拟路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！