在.css文件中引用app相对虚拟路径

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

例:

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

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

1> Marcel Popes..：

---

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

我唯一能找到的是http://www.west-wind.com/weblog/posts/269.aspx上的评论,但说实话,我还没有设法让它工作.如果我这样做,我将编辑此评论:

re:了解Ras Brooks的ASP.Net路径2006年2月25日上午8:43

没有人完全回答布兰特关于CSS文件本身内部图像路径的问题.我有答案.问题是,"我们如何在CSS文件中使用与应用程序相关的图像路径？" 我一直对这个问题感到沮丧,所以我花了最后3个小时来制定解决方案.

解决方案是通过ASPX页面处理程序运行CSS文件,然后在每个路径中使用一小部分服务器端代码来输出根应用程序路径.准备？

添加到web.config:

在CSS内部,只要路径存在,就使用Request.ApplicationPath属性,如下所示:

#content {background:url(<%= Request.ApplicationPath%>/images/bg_c​​ontent.gif)repeat-y; }

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

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

---

这个答案是对的.请参阅http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to/940475#940475

---

这是错误的.Firefox从不解释相对于页面路径的CSS路径.

2> Allain Lalon..：

---

万一你不知道你可以做到这一点......

如果给CSS中的资源提供相对路径它相对于CSS文件,而不是包含CSS的文件.

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

所以这可能适合你.

---

不是这样的.它相对于包含页面的URL.这就是问题.

3> JohnB..：

---

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

我仍然保留在/images/文件夹中显示的图像.例如照片是内容,它们不是网站皮肤/主题的一部分.因此,它们不属于该/css/文件夹.

---

您还可以使用相对路径进入目录.如果你有/images/image.jpg和/css/style.css那么`url(../ images/image.jpg)`会正确地定位它.