CSS精灵导航(css sprite navigation)

是否有可能使用CSS精灵导航三张图片？

这可能是这样的

我的形象http://img710.imageshack.us/img710/1429/navigx.jpg

如果它可能会是怎样的结果呢？

Answer 1:

您可以使用图像的任何数量的精灵，只要将定位在你的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 2:

对的，这是可能的。 见的exaple这里http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial

Answer 3:

您可以使用精灵任意数量的图像。 取决于你的需求。

Answer 4:

如果做得正确，这将是结果：

替代文字http://img710.imageshack.us/img710/1429/navigx.jpg

文章来源: css sprite navigation