Javascript 如何使用单个png图像创建多个网站按钮（及其悬停）

在悬停状态下更改png图像按钮的颜色是我开始学习的一个基本示例：

HTML

CSS

。按钮{显示：块；浮动：左；宽度：100px；高度：100px；背景：url（'

#hover img url

'）底部；}

。按钮：悬停{背景位置：0；}

通过使用一个图像（一个图像中的所有按钮），我希望所有图像按钮都具有相同的悬停效果。 例如： ：我使用了一个“箭头”按钮，该按钮位于组图像的一部分中（图像也由其他按钮组成）

我的问题是:

这是一种很好的实现方法还是有其他方法

有没有什么名字，我们称之为这种单图像帮助多图像悬停

很难选择图像的一部分并将其用作按钮。有没有其他自动选择图像部分高度和宽度的方法？如果是这样，如何利用图像（按钮）的这一部分而不失去按钮悬停效果的准确性

使用图像精灵

包含CSS标记的在线生成器：

或