我有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是一个大图像,它包含网格中的所有较小图像(不一定是).然后,使用定位仅显示包含图像的精灵部分.
有一些在线工具可以给定一组图像返回一个大的精灵图像,并带有在哪里可以找到较小图像的坐标.
