前幾天MS的ASP.NET小組推出了一個小元件：Sprite and Image Optimization Framework，用于生成Sprite CSS，及将小的圖檔生成一副大圖。
8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59
下載下傳後工程中有一個類庫，一個ASP.NET WebForm示例以及一個ASP.NET MVC示例。
下面我們就看看ASP.NET MVC的示例
圖中所标記的圖檔都是來源于一個整張的圖檔
而這個整張圖檔則是由Sprite and Image Optimization Framework自動以幾個小圖檔合并并生成類似下面的CSS
我們下面看看我們怎麼在程式中使用這個工具吧
在其中建立子目錄每一個子目錄中的圖檔檔案将會自動合并成一個大檔案，并且生成CSS
圖中
框中的檔案為小的圖檔檔案
sprite0.png為自動生成後的大圖檔、highCompat.css/lowCompat.css為自動生成的CSS檔案
注：這兩個CSS檔案暫沒有不同，但未來lowCompat.css可能隻支援IE7-9、FF的主流浏覽器，highCompat将支援其它
settings.xml為配置檔案：
其中
FileFormat為大圖檔類型
Based64Encoding為圖檔位址是否使用Base64編碼，如果使用則生成的CSS可能如下：
Quality為生成圖檔品質
BackgroundColor為背景色，預設透明
MaxSize為最大圖檔大小
這個其中是靠添加Modules來完成的，也就是首次通路頁面時就會自動生成大圖檔以及CSS
在System.Web節點上添加
或IIS7以上在System.WebServer節點上添加
都可以達到效果
這個分兩步走
第一，引用生成的CSS
指定到相應的檔案夾就OK了
最終會根據通路者的浏覽器，生成
或使用highCompat.css的link标簽
第二，如何使用某生圖檔
如果要用img标簽的話
類似這樣去用就可以了，會生成類似下面的标簽
如果要直接使用CSS去引用，則可以使用指定的Class來規定Sprite的背景圖檔
則會在此标簽的背景上顯示大圖檔，并自動設定到要顯示小圖檔的位移。
categories_windowsLogo-png
則表示要顯示~/APP_Sprites/categories/windowsLogo.png
附原圖一張