在 .css 文件中引用应用程序相对虚拟路径

Posted 2023-03-06

【中文标题】在 .css 文件中引用应用程序相对虚拟路径

【英文标题】：Reference app relative virtual paths in .css file

【发布时间】：2010-09-10 12:07:20

【问题描述】：

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

例子：

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

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

【参考方案1】：

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

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

re: 理解 ASP.Net 路径 拉斯布鲁克斯 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 属性 只要有路径存在，就像这样：

#内容 背景：url(/images/bg_content.gif) 重复-y；

.NET 默认提供 MIME 类型为“text/html”的 ASPX 页面， 因此，您的新服务器端 CSS 页面由这个 MIME 提供 导致非 IE 浏览器 没有正确读取 CSS 文件。我们 需要覆盖它是 “文本/CSS”。只需将此行添加为 CSS 文件的第一行：

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

【讨论】：

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

这个答案是错误的。请看***.com/questions/940451/…

我很确定当时它是正确的（我记得在我弄清楚之前与那个错误战斗了几个小时）。现在可能是错的:)

我刚刚编辑了您的答案，以使关于 MIME 类型的关键最后一行可见。另外，我发现如果你用 CSS 注释标记包围它，它会阻止 Visual Studio 抱怨无效的 CSS。 /*<%@ ContentType="text/css" %>*/

【参考方案2】：

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

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

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

所以这可能对你有用。

【讨论】：

并非如此。它是相对于包含页面的 url。这就是问题所在。

我正在使用上面的“不正确”假设在许多浏览器中积极使用它。

参见 haacked.com/archive/2006/01/12/… 和 htmlhelp.com/reference/css/units.html（“部分 URL 相对于样式表源进行解释，而不是相对于 HTML 源。”）

【参考方案3】：

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

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

【讨论】：

当站点还必须在虚拟目录中工作时，这无济于事

你也可以使用相对路径去往下一个目录。如果你有 /images/image.jpg 和 /css/style.css 那么url(../images/image.jpg) 将正确定位它。

这比仅在图像路径前加上 ../ 更容易吗？此选项具有匹配普遍遵循的开发标准的额外好处。

【参考方案4】：

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

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

请改用以下内容。

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

【讨论】：

应该是对其他答案的评论，但感谢您的关注

对此有任何帮助：***.com/questions/27274773/…

【参考方案5】：

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

<%@ Control %>
<style type="text/css>
div.content

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

</style>

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

【讨论】：

对此有任何帮助：***.com/questions/27274773/…

【参考方案6】：

在 Windows 7、IIS 7.5 上：

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

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

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

【讨论】：

只需添加 到system.webServer 下的 handlers 节点，这将为您完成。

【参考方案7】：

.css 文件内部可以使用相对路径；所以在你的例子中，假设你把你的 css 文件放在 ~/Styles/mystyles.css 中。您可以使用 url(../Images/Test.gif) 作为示例。

【讨论】：

当您的应用在虚拟目录而不是网站中运行时，这无济于事

【参考方案8】：

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

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

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