精灵图的使用方法总结

首先，咱们应该知道引入精灵图的缘由：

具体是由于，网页上面的每张图片都要经历一次请求才能展现给用户，小的图标频繁的请求服务器，下降页面的加载速度，为了有效地减小服务器接收和发送请求的次数，提升页面的加载速度，所以，产生了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;
}

　　效果图以下：

若是感受这篇文章对你的真的有用，更精彩的这里