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

Reference app relative virtual paths in .css file

提问by user10834

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.

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

Example:

例子：

When in development, the path of ~/Images/Test.gifmight resolve to /MyApp/Images/Test.gifwhile, 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.

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

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.

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

回答by Marcel Popescu

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

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

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

我唯一能找到的是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?

1. Add to web.config:

回复：了解 ASP.Net 路径作者：Russ Brooks 2006 年 2 月 25 日上午 8:43

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

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

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

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

3. .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" %>
   

2. 在您的 CSS 中，只要存在路径，就使用 Request.ApplicationPath 属性，如下所示：

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

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

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

回答by Allain Lalonde

In case you didn't know you could do this...

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

If you give a relative path to a resource in a CSS it's relative to the CSS file, not file including the CSS.

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

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

So this might work for you.

所以这可能对你有用。

回答by JohnB

Make you life easy, just put images used in your CSS in the /css/folder alongside /css/style.css. Then when you reference your images, use relative paths (e.g. url(images/image.jpg)).

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

I still keep images that are displayed with a <img>in an /images/folder. Photos for example are content, they are not part of the website's skin/theme. Thus, they do not belong in the /css/folder.

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

回答by Andrew Weitzen

Put your dynamic CSS in a user control in an .ascx file and then you do not need to run all your css files through the asp.net page processer.

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

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

But the easiest way to solve the ~problem is to not use a ~at all. In Visual Studio, in Solution Explorer, right click your application, select Properties Window and change the Virtual Path to /.

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

回答by Snarf

Marcel Popescu's solution is using Request.ApplicationPath in the css file.

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

Never use Request.ApplicationPath - it is evil! Returns different results depending on the path!

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

Use the following instead.

请改用以下内容。

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

回答by TchiYuan

On Windows 7, IIS 7.5:

在 Windows 7、IIS 7.5 上：

Not only do you have to do the steps mentionned by Marcel Popescu.

您不仅必须执行 Marcel Popescu 提到的步骤。

You also need to add a handler mapping in IIS 7.5 handler mappings. So that IIS knows that *.css must be used with the System.Web.UI.PageHandlerFactory

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

It's not enough to just set the stuff in the web.config file.

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

回答by Chris Shaffer

Inside of the .css file you can use relative paths; so in your example, say you put your css file in ~/Styles/mystyles.css. You can use url(../Images/Test.gif) as an example.

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

回答by Viv Jones

I was having difficulty in getting background images to display for content containers and have tried many solutions similar to other posted here. I had set the relative path in the CSS file, set it as a style on the aspx page I wanted the background to display - nothing worked. I tried Marcel Popescu's solution and it still didn't work.

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

I did end up getting it to work following a combination of Marcel's solution and trial and error. I inserted the code into the web.config, inserted the text/css line into my CSS file but I removed the background property in the CSS file altogether and set it as a style on the content container in the aspx page I wanted the background to display.

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

It does mean that for each or any other pages that I want to display the background I will need to set the style background property but it works beautifully.

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