為節省請求數而使用圖示合成圖

網頁很多小圖示，比如說，清單頁，每一行都有一些相同的圖示。

如果都用<img src="">，可能新的浏覽器是每樣圖檔隻發一個請求（本地有緩存應該不發請求），老的浏覽器不知道，可能是有多少個IMG就發多少個請求。

就算是每樣圖檔隻發一個請求，但這麼多種圖檔，瞬間的請求還是挺多的。

處理辦法是将這些圖檔都合成一個，然後在CSS裡用

{background-image:url(...); background-repeat:no-repeat;background-position:-159px -39px;width:19px;height:17px;}

的方法。請求隻有一個，節省多了。

通常，将圖示設為背景圖，還用在換膚上。是以，每個合成圖，要搞多種顔色的不同版本。

我用PHOTOSHOP來搞。

步驟：

1、先做出一個合成圖版本（GIF格式，成為模子圖）。css也相應定義好。

2、建立同樣尺寸的空白合成圖，背景為透明。

3、将模子圖拷貝到新圖，這是一個圖層

4、然後拷貝入各種替換的小圖示，它們處于不同的圖層。大小與模子圖上是一樣的，拖到合适位置，剛剛好覆寫要替換的小圖示。

5、好了以後另存為GIF。另一種膚色的合成圖就這樣做好了。對應的CSS隻要換上圖檔URL，坐标是不用調的。

注意事項：

1、草稿一定要是PSD格式，如果是GIF的話，有些好的圖示拖進來，顔色會失真