CSS精灵图

一、什么是精灵图？

所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。

 

那么这是怎么实现将这么一张复杂的图片分别展示出来的呢，这里就得运用到了background-position。我们通过它来改变背景图片的位置，从而显示出我们想要显示出来的部分。

 最终效果:

总结

1. 精灵图主要针对小的背景图片使用。
2. 精灵图的显示主要借助于背景位置来实现——background-position
3. 一般情况下精灵图都是负值。
4. 网页中的坐标：x轴右边是正值，左边是负值，y轴也是和x轴一样的原理。