1. 程式人生 > >前端小白--工具篇(一)雪碧圖CssSprite

前端小白--工具篇(一)雪碧圖CssSprite

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

CssSprite雪碧圖的優點

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

CssSprite雪碧圖的缺點

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

CssSprite雪碧圖如何使用

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

3.在確認屬性無誤的情況下,點選右上角生成雪碧圖,即可得到一張img.png
4.雪碧圖的呼叫
效果圖如下:
這裡寫圖片描述


.css樣式(將底部生成的css程式碼複製到外部的.css樣式檔案)

   .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>