精靈圖的使用方法總結

首先，咱們應該知道引入精靈圖的緣由：

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

　　效果圖以下：

若是感受這篇文章對你的真的有用，更精彩的這裏