css-Sprite （雪碧图）

雪碧图的使用场景：

                         1，静态图片，不随用户信息的变化而变化

                         2，小图片，图片容量比较小

                        3，加载量比较大

         为什么要用雪碧图：有效的减少http请求数量，加速内容显示；

         为什么说减少http请求，可以加速内容显示

         每请求一次，就会和服务链接一次，建立链接需要额外时间的

       可以尽量减少http请求的数量，达到优化的效果

不推荐使用雪碧图的地方：

              一些大图不建议拼成雪碧图  如果用大图拼成雪碧图的话，加载的慢，反而达不到显示快的效果

css Sprite(雪碧图）的实现原理：

        通过css background-position这个属性来控制的，通常来讲我们设置一个区域的背景图，然后来控制背景图的位置，来实现这个功能

        拼合背景图的小图（x,y）为负值，以左上角的顶点为（0,0）坐标的，当我们需要对坐标系中一个区域进行展示的时候。

雪碧图的实现方式：

     PS手动拼图（小的网站，自己可以动手拼图）

    使用sprite工具自动生成（大型网站）

     CSS sprite 自动生成工具------CssGaga是windows环境下，快速生成雪碧图的工具，这款工具除了帮我们生成雪碧图之外，还会把background-position的代码写好

     网上有安装和配置都有（需要大量的配置，说明很详细）样式

      注意：每个标签都有自己默认的margin和padding；每次都要清除默认样式的原因，自己设置样式的原因是，保证在各个浏览器下的展示效果相同

作者：哈哈腾飞
链接：http://www.jianshu.com/p/18051247c22c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。