在對WEB前端做性能優化時，為了有效減少http請求數，通常會把Web用到的圖片合并成一張大圖，采用CSS的background-position 屬性，控制頁面的圖片顯示。

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

在這里，我來談談我自己的實現思路：
1.不采用GUI形式，而采用CLI方式實現該程序，暫定該程序名為csssprite

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

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.實現算法
至于說如何實現算法的，以后再發布出來，大家各自發揮！

5.可維護

當新增、去除某個小圖片時，保證之前生成的css class依然能用。?

?

希望能有人以開源的形式實現，最好windows,linux平臺都通用，且不需要安裝太多的runtime lib~?

?

轉載于:https://www.cnblogs.com/gaotianpu/archive/2010/04/06/1705109.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。