Как вы отображаете области на значке, установленном для кнопок?

Question

Я хочу использовать набор кнопок входа в систему ( любезно предоставлен Komodo Media ) для моего веб-сайта ASP.NET MVC3 и назначать значки соответствующим кнопкам, но набор кнопок представляет собой одно изображение:
Помимо использования графического редактора и разделения значков на отдельные файлы изображений, есть ли способ сделать это с помощью кода? Я знаю, что подобное происходит с кнопками разметки stackoverflow, но я не знаю, как сделать то же самое программно (также не уверен в правильности термина):

Как правильно "сопоставить" различные части изображения с отдельными кнопками?

Answer 1

Это CSS-спрайт . Скотт Хэнслман написал об этом. Лично я использую Sprite и Image Optimization Framework во многих проектах.

Например, в Razor вы можете просто использовать следующий помощник:

@Sprite.Image("~/App_Sprites/facebook.png")

, который будет отображать правильное изображение с одного Sprite с использованием техники позиционирования фона CSS.

Answer 2

CSS-фоны - вот как это делается.

http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/