5

我正在使用JSF和XHTML 模板，我在模板中使用 CSS 文件，背景图像被称为：

background-image: url("../../images/imageFile.jpg");

因为我正在使用模板，所以我发现我必须为页面和样式/图像保持相同的深度以正确应用样式，但是项目发生了变化，现在它需要文件夹和页面的可变深度，使得这种方法不再可行.

那么我的问题是：

有没有办法在 CSS 文件中用上下文路径（,等）替换相对路径（ ../../,等）？ ../<%Request.getContextPath()%> #{facesContext.requestContextPath}

- - -更新 - - -

绝对路径是不可能的。我需要我的基于模板的页面（无论它们的深度如何）能够找到从我的 CSS 文件中引用的样式和图像资源。

目前，只有当页面、样式和图像在应用程序的文件夹结构中共享相同的深度时才有可能，但我不能再保留这种方法，因为新的项目要求阻止我这样做。

我的项目文件结构示例，<root>即应用程序根目录的路径：

CSS（深度 2）：<root>/styles/global/myStyles.css 包括具有深度 2 路径引用的样式，例如：

background-image: url("../../images/imageFile.jpg");

图像（深度 2）：<root>/images/basic/imageFile.jpg

模板（深度 2）：<root>/template/general/template1.xhtml

页面（深度 2）：（<root>/pages/folder1/page1.xhtml 工作正常）

页面（深度-N）：（<root>/pages/folder1/.../folderN/page2.xhtml 损坏的图像和样式）

4

2 回答 2

7

这些路径相对于 CSS 文件本身的请求 URL。将它们分组到与 CSS 文件本身相同的根级别对我来说似乎很简单。例如/css用于 CSS 文件和/css/imagesCSS 背景图像。这样就可以一路使用url('images/name.ext')了。

我看不出每次都更改路径有什么用处。只要保持一致，并在必要时将其清楚地记录下来，以便现在和将来的每个人都清楚。

于 2010-08-20T21:46:21.417 回答
0

我在 JSF2 项目中遇到了同样的问题，在 css 文件中您无法访问 contextPath 或类似文件。

在 css 中，您可以多次定义相同的选择器（在我的情况下为 #headerImg），生成的 css 是属性的合并，如果发生冲突，加载的“最后一个”将获胜。

所以我只在 css 文件中保留不需要任何类型路径的属性，然后修改我的“根”xhtml 模板文件中的 css 选择器，例如

<load css files >
    <style type="text/css">
#headerImg {
    background: url("${request.contextPath}/resources/images/header.jpg") no-repeat scroll center center #FFCC3D;
}
[...]
</style>
于 2012-05-10T15:09:35.080 回答