假设我的应用程序的根目录下有一个"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:
1
2
3
4
5
6
7
8
9
10
| <compilation debug="true">
<!-- Run CSS files through the ASPX handler so we can write code in them. -->
<buildProviders>
</buildProviders>
</compilation>
<httpHandlers>
</httpHandlers> |
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的文件。
1
| background-image: url(../images/test.webp); |
所以这可能适合你。
让您的生活变得轻松，只需将CSS中使用的图像放在/css/文件夹中，并放在/css/style.css旁边。然后，当您引用图像时，请使用相对路径(例如url(images/image.webp))。
我仍然保留在/images/文件夹中以![]()
显示的图像。例如照片是内容，它们不是网站皮肤/主题的一部分。因此，它们不属于/css/文件夹。
将动态CSS放在.ascx文件中的用户控件中，然后您不需要通过asp.net页面处理器运行所有css文件。
1
2
3
4
5
6
7
| <%@ Control %>
<style type="text/css>
div.content
{
background-image:(url(<%= Page.ResolveUrl("~/images/image.webp") %>);
}
</style> |
但解决~问题的最简单方法是根本不使用~。在Visual Studio的"解决方案资源管理器"中，右键单击您的应用程序，选择"属性窗口"并将虚拟路径更改为/。
Marcel Popescu的解决方案是在css文件中使用Request.ApplicationPath。
永远不要使用Request.ApplicationPath - 它是邪恶的！根据路径返回不同的结果！
请改用以下内容。
1
| background-image: url(<%= Page.ResolveUrl("~/images/bg_content.webp") %>); |
在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页面中内容容器上的样式我希望背景为显示。
它确实意味着对于我想要显示背景的每个或任何其他页面，我将需要设置样式背景属性，但它工作得很漂亮。
