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

问题描述

| 我想在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中有几张图像。因此，如果我在萤火虫中更改背景位置，则会看到完整的图像包。 如何将背景图像移到正确的位置？     

解决方法

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

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

如您所见，gwt-image将默认删除\'background-position \'以及其他一些图片。要覆盖默认位置

0 0

，请使用所需的位置添加更具体的css规则。     ,由于tr元素的宽度是固定的，因此ImageSprite的生成的width属性不起作用。最好在表行的右侧创建一个带有图像元素（如ImageResource）的td。 CSS看起来像：

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

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

</code>

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