1. 程式人生 > >精靈圖(css sprites,css精靈,css雪碧,雪碧圖),圖片整合技術

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

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