css精灵图(雪碧图、图片合成技术)

1. 什么是css精灵图（sprite）？

css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2.使用css精灵图（sprite）的方法

css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

3.代码实现：
使用到的精灵图（sprite）

精灵图分析：

html:

    
    
    
    

    



    

        
付款图标
        
存款图标
        
删除图标
        
粘贴图标
        
笑脸图标
    

效果如图：