建站
咨詢
售后
建站咨詢
新聞中心
什么是css sprite
專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、購物商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
CSS sprite在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
為什么要用這個(gè)工具
1.加快網(wǎng)頁加載速度
瀏覽器接受的同時(shí)請求數(shù)是10個(gè)，如果圖片過多會影響整體的視覺效果，而且對于不穩(wěn)定的網(wǎng)絡(luò)帶寬，加載起來更是噩夢，所以把圖片拼接為一張大圖，從而加快加載速度，以及加速頁面渲染
2.后期維護(hù)簡單
該工具可以直接通過選擇圖片進(jìn)行圖片的拼接，當(dāng)然你也可以自己挪動里面的圖片，自己去布局你的雪碧圖，直接生成代碼，簡單易用
3.開源
該程序已經(jīng)在github上開源，地址：https://github.com/iwangx/sprite
csdn下載地址（不要分）
http://download.csdn.net/detail/wx247919365/8641795
如何使用
1.用ps或者dw把需要的圖片切下來
2.打開CssSprite.exe
打開CssSprite.exe文件，下載地址我會放在下面一點(diǎn)
3.打開圖片
點(diǎn)擊左上角按鈕打開圖片
選擇多張圖片，點(diǎn)擊打開按鈕
4.排布圖片
可以選擇上面的最上面按鈕今天橫豎的默認(rèn)排布，也可以鼠標(biāo)選中圖片拖動位置，拖動完成后程序會根據(jù)內(nèi)部圖片的位置生成面積最小的雪碧圖，當(dāng)然也會改變相應(yīng)的圖片位置
5.代碼生成
在程序中可以生成sass代碼，以及css代碼，看自己需要嘛，自己選擇，選中“是否是手機(jī)端”的時(shí)候會把所有的尺寸除以2，因?yàn)槭謾C(jī)端往往會設(shè)計(jì)圖比較大，所以要縮放，建議生成圖片后再復(fù)制生成的代碼
6.保存雪碧圖
點(diǎn)擊“生成雪碧圖”按鈕，程序會默認(rèn)選中你在第3步的時(shí)候打開圖片的地址，然后點(diǎn)擊確定后生成雪碧圖。
標(biāo)題名稱：cssspritecss雪碧圖生成工具
分享地址：http://fisionsoft.com.cn/article/coisodj.html
