Javascript精灵如何工作？

我有3张不同的图片,想使用CSS创建一个精灵.我知道这将减少HTTP请求.但是,我对这个概念完全陌生,对如何处理这个概念一无所知.

对我来说最好的选择是什么？我还看到有一些CSS Sprite生成器,您可以在其中提交图像的.zip并将其组合.

我尝试这样做,但不了解发生了什么.任何有关创建和使用CSS Sprite的指导都将受到高度赞赏.

更新：我已经阅读了“清单部分”中的文章,但是对我来说还不是很清楚.有人可以提供使用CSS Sprite的示例吗？ [答案中一个简短的,独立的示例对于SO而言,比仅仅链接至其他示例更好. –ed.]

最佳答案

您需要研究的示例如下：

#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Sprite.gif是一个大图像,它包含网格中的所有较小图像(不一定是).然后,使用定位仅显示包含图像的精灵部分.

有一些在线工具可以给定一组图像返回一个大的精灵图像,并带有在哪里可以找到较小图像的坐标.

原文地址：https://www.jb51.cc/css/530776.html