0

スプライト画像があります。そこから1つだけアイコンを表示したい。jsf/primefaces を使用してどのように表示できますか?

次のコードを試しましたが、完全な画像が表示されています。

<p:graphicImage value="/resources/images/image.png" styleClass="lockedImage"/>

.lockedImage{
background-position: -110px -98px;
}
4

1 に答える 1

3

は<p:graphicImage>HTML<img>要素を生成します。を介してスプライト ファイルを画像全体として表示するべきではありません<img>。などのブロックレベル要素の背景画像としてスプライトを使用する必要があります<div>。

例えば

<div class="lockedImage" />

と

.lockedImage {
    width: 16px; /* Set this to icon width. */
    height: 16px; /* Set this to icon height. */
    background-image: url(#{resource['images/image.png']});
    background-position: -110px 98px;
}

（注： CSSファイルをJSFリソースとして提供するために#{resource}使用している場合にのみCSSで機能します。<h:outputStylesheet>それ以外の場合は、正しいパスを自分でハードコードする必要があります）

この問題は JSF とはまったく関係がないことに注意してください。基本的な HTML/CSS です。この質問のコンテキストでは、JSF は単なる HTML/CSS コード ジェネレーターです。JSF をよりよく理解するために、JSF を一時停止して基本的な HTML/CSS を学習することを強くお勧めします。必要に応じて、JSFで<div>using を生成できます。<h:panelGroup layout="block">

于 2013-07-03T12:10:34.503 に答える