前几天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的示例

而这个整张图片则是由Sprite and Image Optimization Framework自动以几个小图片合并并生成类似下面的CSS

.popular_azureLogo-png{width:32px;height:30px;background-image:url(sprite0.png);background-position:-0px 0;}

我们下面看看我们怎么在程序中使用这个工具吧

1.在程序中建立一个名为App_Sprites的文件夹

在其中建立子目录每一个子目录中的图片文件将会自动合并成一个大文件，并且生成CSS

2.如何让这这些文件自动生成的

这个其中是靠添加Modules来完成的，也就是首次访问页面时就会自动生成大图片以及CSS

在System.Web节点上添加

    <httpModules>
      <add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
    </httpModules>

或IIS7以上在System.WebServer节点上添加

    <modules runAllManagedModulesForAllRequests="true">
      <add type="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
    </modules>

都可以达到效果

3.如何使用

这个分两步走

第一，引用生成的CSS

    <%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/categories/") %>    
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/popular/") %>

指定到相应的文件夹就OK了

最终会根据访问者的浏览器，生成

    <link href="App_Sprites/categories/lowCompat.css" media="all" rel="stylesheet" type="text/css" />    
<link href="App_Sprites/popular/lowCompat.css" media="all" rel="stylesheet" type="text/css" />

或使用highCompat.css的link标签

第二，如何使用某生图片

如果要用img标签的话

<%: Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/popular/windowsLogo.png" ) %>

类似这样去用就可以了，会生成类似下面的标签

<img class="popular_mesh-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

如果要直接使用CSS去引用，则可以使用指定的Class来规定Sprite的背景图片

<div class="categories_windowsLogo-png">windows</div> 

则会在此标签的背景上显示大图片，并自动设定到要显示小图片的位移。

categories_windowsLogo-png

则表示要显示~/APP_Sprites/categories/windowsLogo.png