精靈圖的使用方法總結

首先，我們應該知道引入精靈圖的原因：

具體是因為，網頁上面的每張圖片都要經歷一次請求才能展示給用戶，小的圖標頻繁的請求服務器，降低頁面的加載速度，為了有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，因此，產生了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;
}

　　效果圖如下：

如果感覺這篇文章對你的真的有用，更精彩的這里