html為什么用雪碧圖的優缺點

CSS Sprite(雪碧圖/精靈圖)

1          概念解釋

將小圖標和背景圖像合並到一張圖片上，然后利用css的背景/定位來顯示需要顯示的圖片部分。

2           優點

① 減少加載網頁圖片時對服務器的請求次數

因為我們在使用雪碧圖之后，本來需要多次請求的圖片，我們可以一次請求過來，然后使用background-position

減少了該頁面向服務器請求的次數，間接地優化了該頁面的性能

②  圖片體積較少，提高頁面的加載速度

③  兼容性好, IE >= 8  IE=7(png8)

④ 減少鼠標滑過的一些bug

 

3           缺點

①  制作雪碧圖比較麻煩

② 樣式的書寫，定位比較麻煩

4           原理

a)   將所有圖標集合至一張透明圖片上

b)   background設置為背景圖

c)   background-position定位每一個圖標的位置

1-5           示例

/* 調用雪碧圖 */

.icons{
background: url(img/icons.png),no-repeat;
display: inline-block;
font-style: normal;
}

/* 修改位置 */

.icon_1 {
background-position: 0px -152px;
}

.icon_2 {
background-position: 0px -180px;
}