当前位置： 文江博客 话题详情

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

发布于 2024-07-05 16:41:13 字数 363 浏览 8 评论 0 原文

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

示例：

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

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

原文

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.

Example:

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

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

落日海湾 2024-07-12 16:41:13

不幸的是，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 页面处理程序，然后
使用少量服务器端代码
输出根的每个路径
应用程序路径。 准备好了吗？

  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>

  • 在 CSS 中，使用 Request.ApplicationPath 属性
    只要有路径存在，就像这样：

    #内容{
    背景： url(<%= Request.ApplicationPath
    %>/images/bg_content.gif) 重复-y;
    }

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

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

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

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

    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:
     <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>

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

    2. .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" %>
    回复 原文
    薯片软お妹 2024-07-12 16:41:13

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

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

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

    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.

    回复 原文
    无人问我粥可暖 2024-07-12 16:41:13

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

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

    请改用以下内容。

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

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

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

    Use the following instead.

    background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);
    回复 原文
    甜尕妞 2024-07-12 16:41:13

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

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

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

    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.

    <%@ 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 /.

    回复 原文
    对不⑦ 2024-07-12 16:41:13

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

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

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

    所以这可能对你有用。

    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.

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

    So this might work for you.

    回复 原文
    鹊巢 2024-07-12 16:41:13

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

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

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

    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.

    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.

    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.

    回复 原文
    说好的呢 2024-07-12 16:41:13

    在 Windows 7、IIS 7.5 上：

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

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

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

    On Windows 7, IIS 7.5:

    Not only do you have to do the steps mentionned by 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

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

    回复 原文
    夏见 2024-07-12 16:41:13

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

    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.

    回复 原文
    ~没有更多了~

    关于作者

    亽野灬性zι浪

    暂无简介

    0 文章
    0 评论
    22 人气
    发私信

    相关话题

    更多

    热门标签

    操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
    更多

    推荐作者

    留蓝

    文章 0 评论 0

    18790681156

    文章 0 评论 0

    zach7772

    文章 0 评论 0

    Wini

    文章 0 评论 0

    ayeshaaroy

    文章 0 评论 0

    初雪

    文章 0 评论 0

    更多

    友情链接

    文江博客
      我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
      原文