web-dev-qa-db-ja.com

リッチフェイスとCSSを使用してJSFアプリケーションに背景画像を追加するにはどうすればよいですか？

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

.rich-ddmenu-label {

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

}

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

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

<h:graphicImage/>

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

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

cssjsfrichfaces
10
user125157

問題の要素に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.gifを意味しているのに、http://server/images/the_image.gifで画像を検索します。

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

5
roryf

JSF 2.でも同じ問題が発生しました。私は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はlibrary JSFが探すべき場所（jsfはリソースの下にあるすべてのライブラリ/ファイル、少なくともデフォルトのResourceHandlerを想定しています）、そしてリソースの名前です。

より深い構造の場合は

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

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

66
lostiniceland

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

ウェブページ->リソース-> css // cssページ

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

webページ// xhtmlファイル

以下をお試しください：

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

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

お役に立てれば。

2
Michael

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>
2
Damo

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

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

これにより、htmlと同じ方法でファイルが読み込まれます。これにより、本文のレベル（ページ全体）でバックグラウンドファイルをロードできるようになります。その後、次の命令を使用してcssファイルをjsfファイルにロードできます。

<h:head>
    <h:outputStylesheet name="ps-pagolinea.css" library="css" />
    <h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>
1
Juan Miguel Olguin Salguero