关于asp.net:Reference app .css文件中的相对虚拟路径

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

例：

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

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

不幸的是，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:

Inside your CSS, use the Request.ApplicationPath property
wherever a path exists, like this:

#content {
background: url(<%= Request.ApplicationPath %>/images/bg_content.webp) 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:

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

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

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

所以这可能适合你。

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

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

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

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

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

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

请改用以下内容。

在Windows 7上，IIS 7.5：

你不仅要做Marcel Popescu提到的步骤。

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

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

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

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

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

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