本文主要介紹前端的工具CssSprite雪碧圖。當圖片數量較多，而且搭配合理的情況下，可以有效地提升網頁速度；另外，藉助 CSS sprite 的特性可以進行圖片提前載入處理。

CssSprite雪碧圖的優點

• 減少請求數
• 圖片總 size減少
• 提前載入圖片

CssSprite雪碧圖的缺點

• 不建議大圖片合併，建議類似圖片合併

CssSprite雪碧圖如何使用

Tips:請注意自己的css中資料夾是否正確，可修改，圖片檔名稱即該雪碧圖的公共類名.img可修改

3.在確認屬性無誤的情況下，點選右上角生成雪碧圖，即可得到一張img.png
4.雪碧圖的呼叫
效果圖如下：

   .img{background:url(images/img.png)  no-repeat;background-size:750px 50px;display:inline-block;}
        .icon_shuma{height:50px;width:50px;background-position:0 0;}
        .icon_shuiguo{height:50px;width:50px;background-position:-50px 0;}
        .icon_shipin{height:50
 
px;width:50px;background-position:-100px 0;}
        .icon_yifu{height:50px;width:50px;background-position:-150px 0;}
        .iocn_jiafang{height:50px;width:50px;background-position:-200px 0;}
        .icon_zhusu{height:50px;width:50px;background-position:-250px 0;}
        .icon_yiliao{height:50px;width:50px;background-position
 
:-300px 0;}
        .icon_shengxian{height:50px;width:50px;background-position:-350px 0;}
        .icon_meishi{height:50px;width:50px;background-position:-400px 0;}
        .icon_meirong{height:50px;width:50px;background-position:-450px 0;}
        .icon_bangong{height:50px;width:50px;background-position:-500px 0;}
        .icon_meizhuang{height:50px;width:50px;background-position:-550px 0;}
        .icon_qita{height:50px;width:50px;background-position:-600px 0;}
        .icon_pingtuan{height:50px;width:50px;background-position:-650px 0;}
        .icon_muying{height:50px;width:50px;background-position:-700px 0;}

.html前端程式碼呼叫css

<div class="img icon_shuma">
</div>
<div class="img icon_shuiguo">
</div>