前幾天MS的ASP.NET小組推出了一個小組件：Sprite and Image Optimization Framework，用于生成Sprite CSS，及將小的圖片生成一副大圖。

　　下載地址：http://aspnet.codeplex.com/releases/view/50140

　　8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59

　　下載后工程中有一個類庫，一個ASP.NET WebForm示例以及一個ASP.NET MVC示例。

　　下面我們就看看ASP.NET MVC的示例：

　　圖中所標記的圖片都是來源于一個整張的圖片：

　　~\App_Sprites\categories\sprite0.png

　　~\App_Sprites\popular\sprite0.png

　　而這個整張圖片則是由Sprite and Image Optimization Framework自動以幾個小圖片合并并生成類似下面的CSS：

　　我們下面看看我們怎么在程序中使用這個工具吧。

　　1.在程序中建立一個名為App_Sprites的文件夾

　　在其中建立子目錄每一個子目錄中的圖片文件將會自動合并成一個大文件，并且生成CSS。

　　圖中框中的文件為小的圖片文件，sprite0.png為自動生成后的大圖片、highCompat.css/lowCompat.css為自動生成的CSS文件。

　　注：這兩個CSS文件暫沒有不同，但未來lowCompat.css可能只支持IE7-9、FF的主流瀏覽器，highCompat將支持其它。

　　settings.xml為配置文件：

 　　其中FileFormat為大圖片類型Based64Encoding為圖片地址是否使用Base64編碼，如果使用則生成的CSS可能如下：

　　Quality為生成圖片質量，BackgroundColor為背景色，默認透明，MaxSize為最大圖片大小。

　　2.如何讓這這些文件自動生成的

　　這個其中是靠添加Modules來完成的，也就是首次訪問頁面時就會自動生成大圖片以及CSS，在System.Web節點上添加：

　　或IIS7以上在System.WebServer節點上添加：

　　都可以達到效果。

　　3.如何使用

　　第一.引用生成的CSS

　　指定到相應的文件夾就OK了，最終會根據訪問者的瀏覽器，生成：

　　或使用highCompat.css的link標簽。

　　第二 . 如何使用某生圖片

　　如果要用img標簽的話：

　　類似這樣去用就可以了，會生成類似下面的標簽：

　　如果要直接使用CSS去引用，則可以使用指定的Class來規定Sprite的背景圖片：

　　則會在此標簽的背景上顯示大圖片，并自動設定到要顯示小圖片的位移。

　　categories_windowsLogo-png

　　 則表示要顯示~/APP_Sprites/categories/windowsLogo.png

　　 附原圖一張：