问题
I want to use a login button set (courtesy of Komodo Media) for my ASP.NET MVC3 website and assign the icons to the corresponding buttons, but the button set is a single image:
Aside from going in with an image editor and splitting the icons out into separate image files, is there a way to do it with code? I know that a similar thing is done with the stackoverflow markup buttons, but I don't know how to do the same thing programatically (not sure of the proper term either):
What's the proper way to "map" the different parts of image to separate buttons?
回答1:
That's a CSS sprite. Scott Hansleman blogged about it. Personally I have been using the Sprite and Image Optimization framework in many projects.
For example in Razor you could simply use the following helper:
@Sprite.Image("~/App_Sprites/facebook.png")
which will render the correct image from the single Sprite using CSS background positioning technique.
回答2:
CSS backgrounds are how it's done.
http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/
来源：https://stackoverflow.com/questions/8948955/how-do-you-map-areas-on-icon-set-to-buttons