使用Visual Studio创建映像向导（Image Sprite）——Web Essential

原版的：Creating Image Sprite in Visual Studio - Web Essential

译者注：有关图片精灵的信息请參阅http://baike.baidu.com/view/2173476.htm。

通过本文，能够学习到怎样使用Visual Studio的Web Essential扩展来创建图片精灵。

假如你有一个站点，使用了大量的图像。且每个图像都是通过独立的请求载入的，那么请求的数量就会添加。这样，站点速度就会变慢。而这就须要进行优化，以加快站点速度。

图片精灵是一种将多个图像合成为一个大图像的排序技术，这样，站点就仅仅须要载入一个文件而不是多个文件，从而能够加快站点速度。

下面先来了解一下Web Essential是什么，然后再看看怎样在Visual Studio IDE中创建图片精灵。

Web Essential

Web Essentials为Visual Studio扩展了一些新功能。只是已经被Web开发者遗忘非常多年了。

假设你要编写CSS、HTML、JavaScript、TypeScript、CoffeeScript或者LESS。那么，你将会发现有很多实用的功能能够让你作为一个开发者的生活更轻松。

该扩展主要面向的是全部使用Visual Studio的Web开发者。

它在2012年8月由Mads Kristensen首次提出。

基于Visual Studio 2013的Web Essentials 1.7如今让图像处理比以往简单了非常多。

假设你还没有将该扩展安装到你喜爱的Visual Studio IDE中，那么你将会错过非常多功能。你能够从高速的从这里去下载它。

如今，让我们来探讨一下怎样去创建图像精灵。

将粘贴板中的图像粘贴到Visual Studio编辑器中

在Web Essential包括此功能之前虽然有很多不同的方法来创建图片精灵，但使用Visual Studio Web Essential扩展能够让该工作比之前的方法更简单。下面。依照下面步骤去做。

第一步：选择图片并右击选择的图片>Web Essentials>Create Image Sprite...

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbnhpYW9kZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

在单击“Create image sprite”后，它会让你输入精灵名称。输入名称并单击保存button。默认情况下，新的精灵会被加入到images文件夹。

第2步：展开精灵树（如上图）。会马上在精灵树下看到.png文件。这些.png文件实际上就是单一图像中所包括的我们在创建精灵时选择的小图片。例如以下图。

第3步：展开MySprite.png文件，会找到.css、.less、.map和.scss文件，这些文件用途不大。仅仅是精灵的备份。只是将他们留在项目里非常重要。

假设打开MySprite.png.css文件。会看到一些CSS代码。能够将这些代码拷贝到原来的样式文件之中（site.css）。

下面是MySprite.png.css文件的屏幕截图。

在上图中能够看到每个小图片的定义，这些小图片是依据他们在大图片的位置来进行显示的。

将这些样式拷贝到Site.css文件或者其它的样式文件。

第4步：如今，为了能使用这些CSS，也就是新的图片精灵，须要在DOM中使用下面标记：

<div class="orderedList0"></div>
<div class="orderedList1"></div>
<div class="orderedList2"></div>
<div class="orderedList3"></div>
<div class="orderedList4"></div>

能够看到。在这里使用了类选择器来将CSS文件映射到样式。

我为这录了一个Hindi视频。假设你不了解Hindi。能够查看以上步骤。

译者注：要看视频请訪问源地址。

作者：Abhimanyu Kumar Vatsa, Microsoft MVP in ASP.NET/IIS | Author | IT Faculty | Student of M.Tech. IT, works as an Assistant Lecturer in Coxtan College, Bokaro. Know More