首先，我们应该知道引入精灵图的原因：
具体是因为，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。
其次，我们应该知道精灵图过程
能够缩小源文件的体积，减少http的请求，提高页面的性能
相信在了解二则之间的异同点之后会对精灵图和图标字体的使用更加有的放矢，运用自如。下面来看看我对精灵图使用的详细总结：
除了之前在我的博客的随笔中提到解决网站中的小图标问题的方法之外，还可以使用精灵图的方式解决网站中的小图标问题，这种办法相比较之前的方法，稍微有点复杂，主要用到background-position属性外，还需要使用定位的方式。具体怎样解决，可以详细分析下面的代码，真的非常有用。
精灵图片：
<style type="text/css"> *{ padding:0; margin:0; } li{ list-style: none; } .box{ border: 1px solid blue; /* 250px;*/ display: inline-block; margin: auto; overflow: hidden; } .box li{ float: left; width: 100px; height: 100px; background-repeat: no-repeat; /*background-color: red;*/ margin: 15px; background-image: url(jingling.png); } </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script type="text/javascript">
// 获取li var img = document.getElementsByTagName("li")
for(var i = 0; i < img.length; i++){
var bl = i*104; img[i].setAttribute("style","background-position:-"+bl+"px 0px;"); } </script> </body> </html>
页面效果：
