GWT ImageResource 背景位置答案

【问题标题】：GWT ImageResource background-positionGWT ImageResource 背景位置
【发布时间】：2012-08-30 22:41:27
【问题描述】：

我正在尝试在使用 UIBinder 的 GWT 中使用单个 .png 作为具有悬停效果的按钮（例如 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 捆绑并显示在浏览器中就好了。但是，我的 :hover CSS 没有按预期工作。当我悬停时，它确实会在图像周围显示一个蓝色边框，所以我知道 CSS 正在工作，但图像没有改变。

看起来捆绑的图像在元素样式本身中将背景位置属性覆盖为0 0，这否定了我的类级样式。有没有办法告诉 GWT 不要为捆绑的 ImageResource 设置背景位置？还是有更好的方法来完全做到这一点？

谢谢。

【问题讨论】：

请注意，我可以使用 !important 声明来完成这项工作，但这对我的口味来说有点老套。

标签： gwt uibinder clientbundle

【解决方案1】：

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

另一种方法是使用 GWT 的 sprite 系统生成背景图像，您可以在其上覆盖 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 属性。

当然，这个方法可以应用于任何支持 background-image 的 DOM 元素。

【讨论】：