CSS 中的 Sprite 雪碧图 图像精灵 简单入门

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

background:“url(1.jpg) -100px -100px”，

第一个数值表示背景图相对于自己的左上角 向左偏移100px，负值向左，正值向右，

第二个数值表示背景图相对于自己的左上角 向上偏移100px，负值向上，正值向下。

 

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 
2、CSS