精靈圖
精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術
原理:將多張單一的圖片整合到一張圖上，以背景引入,並使用background-position調整背景位置，使之顯示不同圖片
目的:降低瀏覽器向伺服器的請求次數,提高網頁載入速度
優點:降低請求次數,多張圖整合成一張降低整體大小,整改一張圖使得整體風格主題改變,提高維護性
缺點:自適應佈局難控制,製作繁瑣,不合理的整合圖片會導致呼叫混亂,一張圖更改導致整體變化(牽一髮動全身)

<div class="sprites"></div>

.sprites:before{
    content
 
: "";
    display: block;
    width: 17px;
    height: 17px;
    background: #999;
    background-image: url(img/sprites1.png);
    background-repeat: no-repeat;
    background-position: 0 -118px;
}

PS：借用360導航頁的精靈圖。

宣告：若有侵權等問題請聯絡作者，定當及時改正、致歉和刪除有問題的文章！