使用Visual Studio創(chuàng)建圖片精靈（Image Sprite）——Web Essential

原文：Creating Image Sprite in Visual Studio - Web Essential

譯者注：有關圖片精靈的信息請參閱http://baike.baidu.com/view/2173476.htm。

通過本文，可以學習到如何使用Visual Studio的Web Essential擴展來創(chuàng)建圖片精靈。假如你有一個網站，使用了大量的圖像，且每個圖像都是通過獨立的請求加載的，那么請求的數量就會增加，這樣，網站速度就會變慢。而這就需要進行優(yōu)化，以加快網站速度。

圖片精靈是一種將多個圖像合成為一個大圖像的排序技術，這樣，網站就只需要加載一個文件而不是多個文件，從而可以加快網站速度。

下面先來了解一下Web Essential是什么，然后再看看如何在Visual Studio IDE中創(chuàng)建圖片精靈。

Web Essential

將粘貼板中的圖像粘貼到Visual Studio編輯器中

在Web Essential包含此功能之前盡管有許多不同的方法來創(chuàng)建圖片精靈，但使用Visual Studio Web Essential擴展可以讓該工作比之前的方法更簡單。下面，按照以下步驟去做。

第一步：選擇圖片并右擊選擇的圖片>Web Essentials>Create Image Sprite...

在單擊“Create p_w_picpath sprite”后，它會讓你輸入精靈名稱，輸入名稱并單擊保存按鈕。默認情況下，新的精靈會被添加到p_w_picpaths目錄。

第2步：展開精靈樹（如上圖），會立即在精靈樹下看到.png文件。這些.png文件實際上就是單一圖像中所包含的我們在創(chuàng)建精靈時選擇的小圖片。如下圖。

第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