使用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

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

在Web Essential包含此功能之前尽管有许多不同的方法来创建图片精灵，但使用Visual Studio Web Essential扩展可以让该工作比之前的方法更简单。下面，按照以下步骤去做。

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

在单击“Create p_w_picpath sprite”后，它会让你输入精灵名称，输入名称并单击保存按钮。默认情况下，新的精灵会被添加到p_w_picpaths目录。

第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