<button class="u-btn">點我</button>

.u-btn{background: url(images/btn.png) no-repeat 0 0 ;} 
.u-btn{background: url(images/sprite.png) no-repeat 0 -50px;}

圖片合并方案

什么是Sprite拼圖：

Sprite拼圖好處：

減少網(wǎng)絡請求，提升網(wǎng)頁加載速度

圖片優(yōu)化合并

平衡與取舍

壓縮工具

- 無損 Minimage 

- 有損  TinyPng 

合并-排列

圖片之間必須保留空隙

圖片排列方式

- 橫向排列

- 縱向排列

合并-分類

把同屬于一個模塊的圖片進行合并

把大小相近的圖片進行合并

把色彩相近的圖片進行合并

綜合以上方式合并

合并推薦

只本頁用到的圖片合并

有狀態(tài)的圖標合并

瀏覽器兼容方案

- IE6不支持PNG24半透明    (存2份 : sprite.png 24      sprite_ie.png 8  )

- CSS3 & 切圖