如何将图标集上的区域映射到按钮？答案

【问题标题】：How do you map areas on icon set to buttons?如何将图标集上的区域映射到按钮？
【发布时间】：2012-01-20 23:02:02
【问题描述】：

我想为我的 ASP.NET MVC3 网站使用登录按钮集 (courtesy of Komodo Media) 并将图标分配给相应的按钮，但按钮集是单个图像：
除了使用图像编辑器并将图标拆分为单独的图像文件之外，有没有办法用代码来做到这一点？我知道使用 stackoverflow 标记按钮可以完成类似的操作，但我不知道如何以编程方式执行相同的操作（也不确定正确的术语）：

将图像的不同部分“映射”到单独的按钮的正确方法是什么？

【问题讨论】：

标签： c# asp.net-mvc-3 button icons css-sprites

【解决方案1】：

那是CSS sprite。 Scott Hansleman blogged 关于它。就我个人而言，我在许多项目中一直使用Sprite and Image Optimization framework。

例如，在 Razor 中，您可以简单地使用以下帮助器：

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

这将使用 CSS 背景定位技术从单个 Sprite 渲染正确的图像。

【讨论】：

查看文档后，看来我仍然需要将图像拆分为单独的图标，并让 Sprite 和图像优化框架为我生成精灵。我只是想向其他查看此答案的人指出，您从多个图标开始，框架会为您生成一个精灵。

【解决方案2】：

CSS 背景是怎么做的。

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

【讨论】：