是否可以在 CSS 精灵导航中使用三个图像?
这可能是这样的
我的图片 http://img710.imageshack.us/img710/1429/navigx.jpg
如果可能,结果会是什么?
您可以在精灵中使用任意数量的图像。取决于你的要求。
您可以在精灵中使用任意数量的图像,只需在 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 距离即可将精灵与元素正确对齐,然后您就离开了!
希望有帮助。