Question

我正在尝试使用UIBinder在GWT中使用单个.png作为具有悬停效果的按钮（la this），但是我很难过。

这是我的ui.xml文件：

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

我能够将.png捆绑并在浏览器中显示得很好。但是，我的：悬停CSS无法正常工作。实际上，当我悬停时，它会在图像周围显示蓝色边框，因此我知道CSS正在运行，但图像不会改变。

看起来捆绑的图像在元素样式本身中覆盖了背景位置属性0 0，这会否定我的类级样式。有没有办法告诉GWT不要为捆绑的ImageResource设置背景位置？或者有更好的方法来完成这项工作吗？

感谢。

Answer 1

根据我在网络上找到的不良文档，您无法覆盖g:Image的背景位置属性。

另一种方法是使用GWT的精灵系统生成背景图像，您可以在其上覆盖background-position属性。

例如，

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

FunctionResources所在的地方：

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

    Style style();
    ImageResource survivalIconImage();
}

并且，在名为style.css的单独CSS文件中，您将拥有：

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

这将生成一个div，其中包含您想要的背景图像。您可以随意修改div的background-position属性。

当然，此方法可以应用于任何支持背景图像的DOM元素。

GWT ImageResource背景位置

1 个答案: