使图片的每个部分成为一个按钮

Question

我正在制作一个游戏的用户脚本，允许玩家从菜单中选择一个天赋。我有一张图片，其中包含每个样子：

如果不将每个天赋分成自己的形象，我怎样才能以某种网格状的方式在每个天赋的顶部制作一层按钮？这样，当用户按下天赋上的按钮时，我就可以知道按下了哪个按钮并获得了选择它的必要信息。

我正在考虑将图片放在<img>标签中并制作一张位于图像正上方的桌子，但我担心如何正确排列桌子。

Answer 1

听起来你想要使用精灵地图

快速示例

从中获取您想要的图像的唯一部分。

这样的CSS

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

这样的HTML

<div id="home"></div>

您将为img_navsprites.gif

中的每个图片定义一个css id或类

简化的CSS示例

这样我们减少了所需的CSS（以更详细的html为代价）。 Bootstrap与glyphicons做类似的事情。

<强> CSS

.sprite {
    // Assuming equal width and height of all sprites in the map
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif);
}

.sprite-first {
    background-position: 0 47px;
}
.sprite-second {
    background-position: 0 93px;
}
.sprite-third{
    background-position: 0 139px;
}

<强> HTML

<span class="sprite sprite-second"></span>

<强>来源

CSS Image Sprites