html - URL 在 CSS 中。如何绑定(bind)到当前部署的任何上下文？

Question

我正在处理一个非常庞大的 Web 代码库，其中有多个元素使用 Spring 和各种其他框架。我是网络开发新手，所以如果这里有我误用的术语，或者如果您需要澄清，请告诉我。

目前我们正在研究如何将尽可能多的图标集中到一个元素中

.laf 元素。

我的问题是在其他元素的 CSS 中，我可以像这样引用那些 img 文件:

.trash {
    background:url(/demo/static/package/name/laf/images/trash.png) no-repeat;
    color:#FFF;
    cursor:pointer;
}

现在根目录 (/demo) 会根据我们部署元素的位置而改变。我们不想每次部署到不同上下文时都必须更改以这种方式使用的所有图像文件的/demo 标记。

有没有办法在 css 中引用部署的上下文？或者这是我们需要在更高层次上处理的事情吗？

Answer 1

执行此操作的一种方法(如果您使用的是 Java)是使用 jsp 或 servlet 来生成您的 css。如果走 jsp 路线并且你正在使用 Spring 标签，你可以使用 <spring:url>标记以生成上下文相关的 URL。

我相信您可以以类似的方式使用 PHP/ruby/任何 Microsoft 技术来完成。

参见 here了解如何在 Java 中执行此操作。

你基本上拥有的是:

在 web.xml 中:

<servlet-mapping>
  <servlet-name>jsp</servlet-name>
  <url-pattern>*.css</url-pattern>
</servlet-mapping>

在你的 .css 文件中:

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<spring:url var="myImage" value="/images/image.png" />

...

.myclass {
    background: url(${myImage});
}

当它被渲染时，它变成:

.myclass {
     background: url(/context/images/image.png);
}

如果您的网络应用程序正在 /context 中运行上下文。