비디오의 "length"속성을 가진 bean의 이미지 표시

Question

이미지의 오른쪽 하단에 비디오 길이가있는 비디오 객체의 이미지를 표시해야합니다.

나는이 시도 :

<h:graphicImage url="#{video.picUrl}" height="30" width="30"> 
    <h:outputText value="#{video.Length}" /> 
</h:graphicImage> 

을하지만 길이 텍스트는 이미지 외부에 표시됩니다. 이미지 하단 오른쪽에 어떻게 표시 할 수 있습니까?

Answer 1

이것은 순수한 HTML/CSS 문제입니다. 먼저 기능적 요구 사항을 달성하기 위해 생성 된 HTML/CSS가 어떻게 보이는지 파악해야합니다. 예를 들어, HTML을

.imageWithText { 
    position: relative; 
} 
.imageWithText .text { 
    position: absolute; 
    bottom: 3px; 
    right: 3px; 
    background-color: white; 
    font-size: .5em; 
} 

당신을 위해 해결해야 다음 CSS와

<span class="imageWithText"> 
    <img src="some-video.png" width="30" height="30" /> 
    <span class="text">123</span> 
</span> 

를 다음과 같습니다. 이 하단 오른쪽에 붙어 좋게되도록

볼의 .text 절대적 3px에 bottomright과 더불어 .imageWithText에 대해 위치된다. 이제

는 JSF와 같은 HTML을 생성하는 코드는 같은 CSS는 재사용 가능한입니다

<h:panelGroup styleClass="imageWithText"> 
    <h:graphicImage value="#{video.picUrl}" height="30" width="30" /> 
    <h:outputText styleClass="text" value="#{video.length}" /> 
</h:panelGroup> 

처럼 보일 것입니다.