Question

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

示例：

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

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

Answer 1

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

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

re：理解ASP.Net路径   Russ Brooks 2006年2月25日@ 8:43   是

没有人完全回答布兰特的问题   关于CSS内的图像路径   文件本身。我有答案。该   问题是，“我们如何使用   应用程序相对图像路径   在CSS文件中？“我一直都是   这个问题也很沮丧，   所以我只花了最后3个小时   制定解决方案。

解决方案是运行CSS文件   然后通过ASPX页面处理程序   使用一小部分服务器端代码   输出根的每个路径   申请路径。准备好了吗？


添加到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>

在CSS中，使用Request.ApplicationPath属性   路径存在的地方，如：

#content {   background：url（＆lt;％= Request.ApplicationPath   ％＆gt; /images/bg_content.gif）repeat-y;   }
.NET默认提供MIME类型为“text / html”的ASPX页面，因此，您的新服务器端CSS 这个页面是用这个MIME提供的导致非IE浏览器的类型没有正确读取CSS文件。我们需要重写这个 “文/ CSS”。只需将此行添加为 CSS文件的第一行：
<%@ ContentType="text/css" %>

Answer 2

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

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

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

所以这可能适合你。

Answer 3

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

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

Answer 4

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

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

请改用以下内容。

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

Answer 5

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

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

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

Answer 6

在Windows 7上，IIS 7.5：

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

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

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

Answer 7

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

Answer 8

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

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

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

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

8 个答案: