1

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 で background-position を変更すると、完全なイメージ バンドルが表示されます。

背景画像を正しい位置に移動するにはどうすればよいですか?

4

2 に答える 2

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

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

お気づきのように、gwt-image は、他のいくつかのものと一緒に「background-position」を削除するデフォルトになります。のデフォルトの位置をオーバーライドするには0 0、より具体的な CSS ルールを希望の位置に追加します。

于 2011-05-25T21:18:43.867 に答える
1

tr 要素の幅が固定されているため、ImageSprite の生成幅プロパティが機能しません。テーブル行の右側にイメージ要素 (ImageResource として) を持つ td を作成することをお勧めします。CSS は次のようになります。

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

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

</code>

したがって、解決策は、テーブルにこれ以上画像がないことを前提としています。

于 2011-06-16T09:01:51.573 に答える