5

私はJSFおよびXHTMLテンプレートを使用しており、テンプレートでCSSファイルを使用しています。背景画像は次のように呼び出されます。

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

テンプレートを使用しているため、ページとスタイル/画像の両方で同じ深さを維持する必要があることがわかりましたが、プロジェクトに変更が加えられ、フォルダーとページに可変の深さが必要になり、このアプローチは実行できなくなりました。

それから私の質問は：

CSSファイル内で相対パス（、、など）をコンテキストパス（、、など）に置き換える方法はあり../../ます ../か<%Request.getContextPath()%>？ #{facesContext.requestContextPath}

- - -アップデート - - -

絶対的な道は問題外です。テンプレートベースのページ（どの深さでも）がCSSファイルから参照されているスタイルと画像のリソースを見つけることができる必要があります。

現在、これは、ページ、スタイル、および画像がアプリケーションのフォルダー構造で同じレベルの深さを共有している場合にのみ可能ですが、新しいプロジェクト要件によりこれを行うことができないため、これ以上このアプローチを維持することはできません。

<root>アプリケーションルートへのパスである私のプロジェクトファイル構造の例：

CSS（depth-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 動作します）

ページ（depth-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 に答える