css - 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 中有几个图像。因此，如果我更改萤火虫中的背景位置，我会看到完整的图像包。

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

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

</code>

所以解决方案假设表中没有更多图像。

2 回答 2