在對(duì)WEB前端做性能優(yōu)化時(shí)，為了有效減少http請(qǐng)求數(shù)，通常會(huì)把Web用到的圖片合并成一張大圖，采用CSS的background-position 屬性，控制頁面的圖片顯示。

問題是，目前雖然有這么一套工具，可以自動(dòng)把若干小圖片合并成一個(gè)大圖（CSS Sprites），并生成css class .但他們都是在線工具，用戶上傳小圖片，然后生成大圖片，一個(gè)本來客戶端完成的工具做成在線web服務(wù)的方式，不太實(shí)用。

在這里，我來談?wù)勎易约旱膶?shí)現(xiàn)思路：
1.不采用GUI形式，而采用CLI方式實(shí)現(xiàn)該程序，暫定該程序名為csssprite

2.在命令行中執(zhí)行 csssprite pre c:\small_imgs\?
pre, css class名稱前綴
c:\small_imgs是網(wǎng)站用到的所有小圖片的存放路徑

3.最終程序生成：
c:\small_imgs\final\main.png,合并后的大圖
c:\small_imgs\final\main.css,合并后的css類
like this
.pre_a{background-position：“”}
.pre_b{background-position：“”}
a,b等是小圖片的名字.

4.實(shí)現(xiàn)算法
至于說如何實(shí)現(xiàn)算法的，以后再發(fā)布出來，大家各自發(fā)揮！

5.可維護(hù)

當(dāng)新增、去除某個(gè)小圖片時(shí)，保證之前生成的css class依然能用。?

?

希望能有人以開源的形式實(shí)現(xiàn)，最好windows,linux平臺(tái)都通用，且不需要安裝太多的runtime lib~?

?

轉(zhuǎn)載于:https://www.cnblogs.com/gaotianpu/archive/2010/04/06/1705109.html

總結(jié)

以上是生活随笔為你收集整理的CSS Sprites图片拼合生成器实现思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。