11

JSFとrichfacesを使用してWebサイトを作成していますが、ドロップダウンメニューラベルでいくつかの背景画像を作成する必要があります。私はあなたがすることによってスタイル属性を使うことができるのを見ました

.rich-ddmenu-label {

    background-image: url("images/the_image.gif");

}

しかし、それはどこにでも画像を配置しようとさえしないようです。

を使用して画像を使用できます

<h:graphicImage/>

その上にテキストを配置する方法はわかりませんが。

私は何が間違っているのですか？テキストの後ろに背景画像を挿入するにはどうすればよいですか？

4

5 に答える 5

69

JSF 2.0でも同じ問題が発生しました。CSSを使用する必要があり、相対パスを使用したソリューションも機能しませんでした（Choghereが投稿したように）。

私の本では、Facelets を VDL (View Declaration Language) として使用すると、プレーンな HTML ページでも式を使用できると読みました。そこで、CSS に EL を直接配置するというアイデアを思いつきました。注: ファイル名などを変更する必要はありませんでした。

これが私がしたことです。しかし、最初に私のファイル構造:

  • /resources/common/overlay.xhtml -> これには次の css が含まれます (複合コンポーネント)
  • /resources/common/overlay.css
  • /resources/images/logo.png

次に、CSS を示します。

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

この場合、 resourceはJSF 2の暗黙的なオブジェクトであり、 imagesは JSF が参照する必要があるライブラリ(jsf は、リソースの下にあるすべてのライブラリ/ファイル、少なくともデフォルトの ResourceHandler を想定しています)、そしてリソースの名前です。

より深い構造の場合、次のようになります。

#{resource['images/folder:logo.png']}

それが役立つことを願っています;）

于 2010-01-09T15:23:37.297 に答える
5

問題の要素が適用されていると仮定するとclass="rich-ddmenu-label"、問題は背景画像へのパスである可能性があります。

パスは、CSSが配置されている場所を基準にしています。外部ファイルにある場合は、それに関連している必要があります。例：

/css/styles.css
/images/the_image.gif

CSSは次のようになります。

background-image: url("../images/the_image.gif");

CSSがHTMLページでインラインの場合、現在のパスを基準にしています。したがって、ページがにある場合は、おそらく。を意味しているときにhttp://server/path/to/page、で画像を検索します。http://server/path/to/page/images/the_image.gifhttp://server/images/the_image.gif

それでも解決しない場合は、生成されたHTMLを投稿してください。

于 2009-06-18T16:14:18.327 に答える
2

Richfaces デモ サイトの例に従っていますか? すなわち。ファセットを使用して、画像とテキストを囲んでいる要素 (例: span または div) 内に配置します。

<rich:dropDownMenu>
    <f:facet name="label"> 
        <h:panelGroup>
            <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
            <h:outputText value="File"/>
        </h:panelGroup>
    </f:facet>
    <rich:menuItem submitMode="ajax" value="New"
        action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
    </rich:menuItem>
    ...
</rich:dropDownMenu>
于 2009-06-18T14:52:58.167 に答える
2

私のフォルダ構造は次のとおりです。

Web ページ -> リソース -> css //css ページ

ウェブページ -> リソース -> 写真 //画像

ウェブページ //xhtml ファイル

以下を試してください：

background-image :url("../pics/logo.gif");

.. 1 つ上のフォルダ レベルに移動します /pics は pics ディレクトリに移動します /logo.gif はファイルを提供します

お役に立てれば。

于 2010-04-28T12:23:33.783 に答える
1

私はこの解決策を得ました：このコンテンツで新しい.cssファイルを作成してください

body {
background-image: url(../resources/images/Fondo.GIF);
}

これにより、html と同じ方法でファイルがロードされます。これにより、body レベル (ページ全体) で背景ファイルを読み込むことができます。病棟の後、jsf ファイルで次の命令を使用して css ファイルをロードできます。

<h:head>
    <h:outputStylesheet name="ps-pagolinea.css" library="css" />
    <h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>
于 2011-01-25T16:35:45.770 に答える