web页面icon实现技术---CSS Sprite技术

cssSprite这一前端技术已经被用烂了，但是我却发现还是有很多的前端开发工程师不了解这个东西，只是大致的知道这个东西貌似是用一张图片去实现所有的icon，却很少人知道使用这个技术其中的一些细节以及注意的地方

cssSprite技术的优点如下：

1、相对于单个icon，它的体积更小，请求服务器的次数也更少

2、cssSprite的图片应该使用png24去保存，相对于png8不会出现毛边

3、由于本质是图片因此可以实现各种丰富的icon

4、由于icon的规律，可以使用js进行统一的处理针对某一批icon

5、维护的成本稍微低点（相对于单个的icon）

以上观点只是个人观点，参考使用---------------技术没有最好，合适就是最好的！

废话不多说，以下是实现的demo截图：