GWT ImageResource background-position

Question

UWinder를 사용하여 GWT에서 단일 .png를 호버 효과 (라 this)가있는 단추로 사용하려고 시도했지만 힘든 시간을 보냈습니다. 내가 잘 브라우저에 번들 표시 .PNG를 얻을 수있어

<ui:with field="functionResources" type="myapp.client.application.functions.FunctionResources"/> 

<ui:style> 

    .clickableIcon{ 
     cursor: hand; 
     cursor: pointer;    
    } 

    .clickableIcon:hover{ 
     cursor: hand; 
     cursor: pointer;       
     background-position: 0 -76px; 
     border: 1px solid blue; 
    } 
</ui:style> 

<g:VerticalPanel ui:field="buttonPanel"> 
    <g:Image ui:field="survivalIcon" debugId="survivalIcon" width="76px" resource="{functionResources.survivalIcon}" styleName="{style.clickableIcon}"/> 

</g:VerticalPanel> 

:

여기 내 ui.xml 파일입니다. 그러나 my : hover CSS는 원하는대로 작동하지 않습니다. 마우스를 가져 가면 이미지 주위에 파란색 테두리가 표시되므로 CSS가 작동 중임을 알 수 있지만 이미지는 변경되지 않습니다.

번들 이미지가 요소 스타일 자체에서 배경 위치 속성 인 0 0을 재정의하는 것처럼 보입니다. 이는 클래스 수준의 스타일을 무효화합니다. GWT가 번들 ImageResource의 배경 위치를 설정하지 않도록 할 방법이 있습니까? 아니면이 모든 것을 할 수있는 더 좋은 방법이 있습니까?

감사합니다.

Answer 1

내가 웹에서 찾은 문서에서 가볍게 g:Image의 백그라운드 위치 속성을 무시할 수 없습니다.

GWT의 스프라이트 시스템을 사용하여 background-position 속성을 재정의 할 수있는 배경 이미지를 생성하는 방법도 있습니다. 예를 들어

,

<div class="{functionResources.style.survivalIcon} {style.clickableIcon}"/> 

FunctionResources는 것 : style.css라는 별도의 CSS 파일에서

public interface FunctionResources extends ClientBundle { 
    public interface Style extends CssResource { 
     String survivalIcon(); 
    } 

    Style style(); 
    ImageResource survivalIconImage(); 
} 

을하고, 당신은 할 것 :

@sprite .survivalIcon { 
    gwt-image: "survivalIconImage"; 
} 

이 의지 원하는 배경 이미지로 div를 생성하십시오. div의 background-position 속성을 자유롭게 수정할 수 있습니다.

물론이 방법은 배경 이미지를 지원하는 모든 DOM 요소에 적용 할 수 있습니다.