CSS之sprite/精灵图/雪碧图

刚开始学CSS Sprite的时候在网上看博客，总感觉写的不清楚，看了很多很久才明白CSS Sprite是个啥玩意儿，对新手党十分不友好。所以打算根据现有的文章和自己的理解写一个通俗的关于雪碧图的博客，能让新手党也一看就懂～

1.什么是CSS雪碧图

css雪碧图就是N张图片的拼接而成的一整张图片，注意是拼接成了一整张，而不是单纯的N张拼接在一起但仍然是零散N张。如下所示，假设我们的网页需要1，2，3张图片，但是我们把它拼接为一张，这样我们只需要引入这一张图片即可。

1.引入这一整张图片，那我只需要用第1/2/3张图片怎么办？

通过CSS3的background-image等属性，这个属性里面有一个叫做backgorund-position的属性，他的作用就是可以移动背景图片的位置，如果我们需要第二张图片，那么我们就通过设置background-positon的值，将图2移动到需要的位置即可。

2.这张图片不仅有我需要的图片，也有我不要的啊，那些图片怎么隐藏呢？

这个需要我们设置height和width，把需要的部分移动到height和width内之后，再通过overflow：hidden把需要的部分隐藏掉就好了！

3.雪碧图需要把很多图拼接在一起，怎么拼接？是拼接好了我直接引用还是引入多张图片之后再自己拼接？

肯定是拼接好了再引入，不然我全部引入了再拼接，和我直接引入多张图片有什么区别呢？至于怎么拼接，哈哈哈，这个我觉得是UI的问题，不过我们也可以通过ps软件进行拼接，现在也有一些现成的雪碧图生成软件，可以试试。

2.为什么要用雪碧图

CSS Sprites又作css精灵，是一种网页图片应用处理方式。它允许你将一个页面