0

だから私は背景画像を持つリスト項目を持っています。ユーザーがリスト項目にカーソルを合わせると、背景項目が変化するようにします。私はこれを使用しています：

li       { width: 400px; height: 80px;
           background-repeat: no-repeat; background-position: 10px 10px;
           background-image: url('myimg.png'); }
li:hover { background-image: url('myimg-hover.png'); }

残念ながら、これにより、最初にページを表示してアイテムにカーソルを合わせると、少しちらつきが発生します。

画像を 1 つの画像に結合し、リスト項目の上にカーソルを置いたときに背景画像の位置を変更するだけです。

1 つに結合された画像は幅 25 ピクセル、高さ 50 ピクセルで、表示される画像はわずか 25 ピクセル x 25 ピクセルです。

私はこれを試しました：

li       { background: url('mynewimg.png') 0 0; }
li:hover { background: url('mynewimg.png') 0 -25px; }

しかし、リスト項目が非常に大きく、正しい位置に配置されていないため、画像全体が表示されます。

どうすればこれができるか知っている人はいますか？

4

3 に答える 3

1

CSS は次のようにする必要があります。

li {
    width: 400px; height: 80px;
    background-repeat: no-repeat;
    background-size: 50px 50px; 
    background-position: 10px 10px;
    background-image: url('mynewim.png'); 
    background-origin: 0px 0px;
}
li:hover { 
   background-origin: 50px 0px; 
}

サイズを明示的に設定してから、オリジンで遊ぶ必要があります

于 2013-10-03T17:06:48.567 に答える
0

jsFiddle がないと、例を視覚化できませんが、画像スプライトについて話していると思います。詳細については、 http://css-tricks.com/css-sprites/をご覧ください。

于 2013-10-03T02:37:23.343 に答える