精灵图的使用方法总结

首先，我们应该知道引入精灵图的原因：

具体是因为，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。

其次，我们应该知道精灵图和图标字体在使用的过程中有哪些异同点：

同:能够缩小源文件的体积，减少http的请求，提高页面的性能

异：图标字体具有矢量效果，放大缩小不失真，而且可以使用CSS任意更改图标字体的颜色；而精灵图的大小固定，放大缩小会失真，更改图片颜色时需要重新修改精灵图。

相信在了解二则之间的异同点之后会对精灵图和图标字体的使用更加有的放矢，运用自如。下面来看看我对精灵图使用的详细总结：

除了之前在我的博客的随笔中提到解决网站中的小图标问题的方法之外，还可以使用精灵图的方式解决网站中的小图标问题，这种办法相比较之前的方法，稍微有点复杂，主要用到background-position属性外，还需要使用定位的方式。具体怎样解决，可以详细分析下面的代码，真的非常有用。

html代码：

<div class="con-nav-right">
              <a href="#">三星手机旗舰店</a>
              <span class="red">京东自营</span> 
              <i class="JIMI"></i>
              <span>JIMI</span>
                
              <i class="guanzhu"></i>
              <a href="#">关注店铺</a>
          </div>

　　css代码：

.con-nav-in .con-nav-right{
    width: 262px;
    height: 44px;
    float: right;
    line-height: 44px;
    position: relative;
}
.con-nav-right, span, i, a {
    font:12px "宋体";
    color: #666666;
}
.con-nav-right .red{
    border: 1px solid red;
    background-color: red;
    color: #FFFFFF;
}
.con-nav-right .JIMI{
    width: 17px;
    height: 18px;
    background: url("../images/_sprite.png") no-repeat;
    position: absolute;
    top: 11px;
    right: 104px;
}
.con-nav-right .guanzhu{
    width: 16px;
    height: 16px;
    background: url("../images/_sprite.png") no-repeat -34px 0px;
    position: absolute;
    top: 12px;
    right:60px;
}