模板化並嘗試從CSS文件中引用上下文路徑

Question

我正在使用JSF和XHTML模板 ，我在模板中使用CSS文件，背景圖像被稱為：

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

因為我正在使用模板，我發現我必須為頁面和樣式/圖像保持相同的深度才能正確應用樣式頁面，但項目有變化，現在它需要文件夾和頁面的可變深度，使這種方法不再可行。

然后我的問題是：

是有一些方法來代替相對路徑（ ../../ ， ../ 等）由上下文路徑（ <%Request.getContextPath()%> ， #{facesContext.requestContextPath} 等等），則CSS內部文件？

----- -----更新

絕對路徑是不可能的。 我需要基於模板的頁面（無論它們的深度）能夠找到我的CSS文件引用的樣式和圖像資源。

目前，只有當頁面，樣式和圖像在應用程序的文件夾結構中共享相同的深度時才有可能，但我不能再保留這種方法，因為新的項目要求阻止我這樣做。

我的項目文件結構的示例，是<root>應用程序根目錄的路徑：

CSS（depth-2）： <root>/styles/global/myStyles.css包含具有深度2路徑引用的樣式，例如：

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

images（depth-2）： <root>/images/basic/imageFile.jpg

templates（depth-2）： <root>/template/general/template1.xhtml

page（depth-2）： <root>/pages/folder1/page1.xhtml （正常工作）

頁面（深度-N）： <root>/pages/folder1/.../folderN/page2.xhtml （損壞的圖像和樣式）

Answer 1

這些路徑相對於CSS文件本身的請求URL。 對於我來說，將它們分組到與CSS文件本身相同的根級別似乎是微不足道的。 EG /css的CSS文件和/css/images的CSS背景圖像。 這樣你就可以一直使用url('images/name.ext') 。

我不知道每次更改路徑有什么用處。 只需保持它們的一致性，並在必要時將其清楚地記錄下來，以便現在和將來對每個人都清楚。

Answer 2

我在JSF2項目中遇到同樣的問題，在css文件中你無法訪問contextPath或類似的東西。

在css中，您可以多次定義相同的選擇器（在我的情況下為#headerImg），生成的css是屬性的合並，如果發生沖突，則“last”加載獲勝。

所以我只在css文件中留下不需要任何路徑的屬性，然后修改我的'root'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>