1

スプライトを使用して、ホバー状態で画像の色を変更していますが、画像にカーソルを合わせると、画像がわずかに下に移動して色が変わります。問題を再現するためにJSFiddleを作成しました 。

おそらくスプライトを間違って使用していますか？彼らと遊ぶのは初めてなので、よくわかりません。

.ratings ul li {
width:18px;
height:18px;
background:url(star.png) 145px 102px;
}

.ratings ul li:hover{
width:18px;
height:18px;
background:url(star.png) 145px 86px;
 }

私はこの画像を使用しています： ここに画像の説明を入力してください

誰かが私の間違いを指摘できますか？

4

3 に答える 3

4

原因

スプライトが正しく構成されていません。この例では、値の少なくとも 1 つがbackground-positionゼロまたは負である必要があります。

CSS スプライトの手法は、要素の背景として使用される画像内の領域background-positionを変更する負の値に依存します。対照的に、正の値 (ゼロより大きい値)は、要素内の背景画像の位置を実際に変更します。background-position

解決

background:url(star.png) 0 0;

background:url(star.png) 0 -18px;

jsFiddle のデモを見る

画像についてのご注意

また、現在のスプライトが高いことに注意してください。34px各スターは16px高いだけのようです。これは、2px2 つの星の間にギャップがあることを意味します。background-position-18px-16px

于 2013-02-20T09:26:42.730 に答える
3 
.ratings ul li {
  width:16px; /* redefine your image offset */
  height:16px; 
  background:url(http://i.stack.imgur.com/S5T0M.png) no-repeat;
}
.ratings ul li:hover {
  background-position: 0 -18px;
}

定義する必要はなくwidth、heightすでに:hover状態になっているもの。このサイトでは、css sprires に関する有益なガイダンスを見つける必要があります。

于 2013-02-20T09:33:29.407 に答える
2

まず16px、星の幅が16px.

次に、オフセットを正しく変更すると、問題が少なくなります。

于 2013-02-20T09:33:41.013 に答える