GWT ImageSprite：如何将背景图像移动到右侧

Question

我想在 GWT 客户端包中使用以下样式：

.myClass tr：悬停{
背景： url("myImage.png") 185px 2px 无重复;
}

我声明图像如下：

@Source("resources/myImage.png")
@ImageOptions(repeatStyle = RepeatStyle.None)
图像资源 myImage();

并将样式更改为：

@sprite .myClass tr:hover {
gwt-image: "myImage";
背景位置：185px 2px;
}

但它不起作用。生成的XYZ.cache.png中有几张图像。因此，如果我更改 firebug 中的背景位置，我会看到完整的图像包。

如何将背景图像移动到正确的位置？

Answer 1

@sprite .myClass tr:hover {
    gwt-image: "myImage";
}

div.myClass tr:hover{
    background-position: 185px 2px; 
}

正如您所注意到的，gwt-image 将默认删除“背景位置”以及其他一些位置。要覆盖 0 0 的默认位置，请添加更具体的 css 规则以及所需的位置。

Answer 2

ImageSprite 生成的 width 属性不起作用，因为 tr 元素的宽度是固定的。最好在表行的右侧创建一个带有图像元素（如 ImageResource）的 td。 CSS 看起来像：

 <code>
    div.myClass img {
      visibility: hidden;
    }

div.myClass tr:hover img {
  visibility: visible;
}

</code>

所以解决方案假设表中不再有图像。