精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術

精靈圖
精靈圖(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導航頁的精靈圖。

聲明：如有侵權等問題請聯繫做者，定當及時改正、致歉和刪除有問題的文章！