如何使用primefaces部分顯示圖像/ jsf

Question

我有一個精靈圖像。我想從那裏只顯示一個圖標。如何使用jsf/primefaces顯示？

我試過下面的代碼，但是完整的圖像正在顯示。

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

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

Answer 1

<p:graphicImage>生成HTML <img>元素。您不應該通過<img>作爲整體圖像顯示精靈文件。您應該使用精靈作爲背景塊級元素的圖像，如<div>。

E.g.

<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; 
} 

（注：#{resource}在CSS只能如果你使用<h:outputStylesheet>服務於CSS文件作爲JSF的資源，否則，您對自己的硬編碼正道）

請注意，這個問題與JSF完全無關。這只是基本的HTML/CSS。 JSF僅僅是一個HTML/CSS代碼生成器。我強烈建議採用JSF暫停並學習基本的HTML/CSS，以便更好地理解JSF。如有必要，您可以在JSF中使用<h:panelGroup layout="block">生成<div>。