primefaces/jsf를 사용하여 이미지를 부분적으로 표시하는 방법

Question

스프라이트 이미지가 있습니다. 거기에서 하나의 아이콘 만 표시하고 싶습니다. jsf/primefaces를 사용하여 어떻게 표시 할 수 있습니까?

다음 코드를 시도했지만 전체 이미지가 표시됩니다. <p:graphicImage>

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

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

Answer 1

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

(참고 : JSF의 자원으로 CSS 파일을 제공하는 <h:outputStylesheet>를 사용하는 경우 CSS에서 #{resource} 그렇지 않으면 당신이 바로 그 경로를 직접 하드 코딩했습니다에만 작동)

이 문제는 JSF와 완전히 관련이 없습니다. 그것은 단지 기본적인 HTML/CSS입니다. JSF는 HTML/CSS 코드 생성기에 불과합니다. JSF를 더 잘 이해하려면 JSF 일시 중지를 취하고 기본 HTML/CSS를 배우는 것이 좋습니다. 필요한 경우 JSF에서 <h:panelGroup layout="block">을 사용하여 <div>을 생성 할 수 있습니다.