css之background-position屬性實現雪碧圖

本文轉載於:猿2048網站➧css之background-position屬性實現雪碧圖

什麼是雪碧圖

雪碧圖就是CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，就是把多張小圖標合併到一張圖片上，而後用css的background-position來顯示須要顯示的部分。

爲何要用雪碧圖

能夠減小加載網頁圖片時對服務器的請求次數，提升頁面的加載速度，解決IE6鼠標滑過期出現閃白的現象。

用雪碧圖有什麼弊端

我的認爲若是你的雪碧圖不是很大，也不是很複雜基本沒什麼弊端。若是你的雪碧圖很大又複雜的話就有出現css代碼複查，網頁佔內存大等各類問題。

實例

上面是一個按鈕第二個是它鼠標通過時的樣子

這是兩個小圖標變合成的一個雪碧圖

<div class="user"><span></span>我的中心</div>
.user {
    width: 108px;
    height: 34px;
    border:1px #ddd solid;
    float: right;
    margin-top: 36px;
    line-height: 34px;
    border-radius: 3px;
    transition: all 0.3s;
    -moz-transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
}
.user span{
    display: inline-block;
    width: 20px;
    height: 22px;
    overflow:hidden;
    margin:5px 10px 5px 10px;
    float:left;
    background-image:url(../img/user.png);
    background-repeat: no-repeat;
    background-position: 0px -22px;    
    transition: all 0.3s;
    -moz-transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
}

.user:hover {
    border:1px #ff9600 solid;
    color:#f00;
}
.user:hover span{
    background-position: 0px 0px;
}

 

以上就是實現的代碼，請自行忽略這個過分效果（transition）。

可能剛開始有人還不會肯定圖片位置。其實很簡單，你只要記住圖片是從左上角（0,0）開始的。

不知道這樣可否看的懂