3

我正在处理一个非常大的 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 中有没有办法引用部署的上下文？或者这是我们需要在更高层次上处理的事情？

4

4 回答 4

1

您想使用相对 URL。

CSS 中的 URL 可以是绝对的（就像你一样），但也可以是相对的。这就是它最常用的方式。

相对 URL 从定义它们的 CSS 文件开始查找。所以你可以使用这样的东西

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

这将（从 CSS 文件的 URL 中看到）向上遍历一个文件夹，然后进入图像文件夹，然后检索垃圾.png。

这显然只有在图像文件夹（从 CSS 文件夹中看到）位于固定位置时才有效。

于 2013-11-06T14:46:59.533 回答
1

One way you could do this (if you're using Java) is to use jsp or a servlet to generate your css. If going the jsp route and you're using Spring tags, you could use the <spring:url> tag to generate context-relative URLs.

I'm sure you could do it using PHP / ruby / whatever Microsoft technology in a similar manner.

See here for how to do this in Java.

What you'd basically have is this:

in web.xml:

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

in your .css file:

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

...

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

When this gets rendered, it becomes:

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

if your webapp is running in the /context context.

于 2013-10-03T20:03:46.287 回答
0

这需要在服务器端进行更改，在 CSS 中无法实现此效果。

于 2013-10-03T19:58:14.390 回答
0

你用什么来做你的网络服务器？如果可能，您可以为每个环境设置不同的虚拟目录来解决这个问题。

于 2013-10-03T19:59:06.417 回答