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

Question

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

.myClass tr:hover {
background: url("myImage.png") 185px 2px no-repeat;
}

我宣布图像如下：

@Source("resources/myImage.png")
@ImageOptions(repeatStyle = RepeatStyle.None)
ImageResource myImage();

并将样式更改为：

@sprite .myClass tr:hover {
gwt-image: "myImage";
background-position: 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将默认删除'background-position'以及其他一些。要覆盖0 0的默认位置，请添加具有所需位置的更具体的css规则。

Answer 2

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

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

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

</code>

因此，解决方案假设表中没有更多图像。