html - css スプライト ナビゲーション

Question

CSS スプライト ナビゲーションで 3 つの画像を使用することは可能ですか?

これはこういうことかもしれません

私の画像 http://img710.imageshack.us/img710/1429/navigx.jpg

可能な場合、結果はどうなりますか？

Answer 1

はい、可能です。ここで例を参照して ください http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial

Answer 2

CSS で位置を移動するだけで、スプライト内で任意の量の画像を使用できます。

.sprite1
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -10px 5px;
}

.sprite1:hover
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -20px 10px;
}

.sprite2
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -30px 15px;
}

.sprite2:hover
{
background-image:url(../../upload/btn_continue_sprite.png);
    background-repeat:no-repeat;
    background-position: -40px 20px;
}

スプライトを要素に適切に配置するには、px 距離を計算するだけで済みます。

それが役立つことを願っています。

Answer 3

スプライトでは、任意の数の画像を使用できます。要件によって異なります。

Answer 4

正しく行われた場合、これは結果になります：

代替テキスト http://img710.imageshack.us/img710/1429/navigx.jpg