前端小白--工具篇(一)雪碧圖CssSprite
阿新 • • 發佈:2019-01-26
本文主要介紹前端的工具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>