javascript - 如何使用一个 png 图像创建多个网站按钮(及其悬停)

Question

在悬停时更改 png 图像按钮的颜色是我开始的一个基本示例:

HTML <a class="button" href="#" title="Trail Button (Dummy button)"></a>

CSS .button { display: block; float: left; width: 100px; height: 100px; background: url(' #hover-img-url ') bottom; } .button:hover {background-position: 0 0;}

example Jiddle for above code

通过使用一张图片(一张图片中的所有按钮)，我希望所有图片按钮都具有相同的悬停效果。例如: Trail Fiddle : 我使用了一个“箭头”按钮，它出现在一组图像的一部分内(图像也包含其他按钮)。

我的问题:

1. 这是实现的好方法还是有其他方法可以做到这一点？

2. 是否有任何名称可以用来称呼这种有助于多张图片悬停的单张图片？

3. 很难选择图像的一部分并将该部分用作按钮。有没有其他自动选择图像一部分的高度和宽度的方法？如果是这样，如何在不失去按钮悬停效果的准确性的情况下利用图像的那部分(按钮)？

Answer 1

使用图像 Sprite

包含 CSS 标记的在线生成器:http://www.spritecow.com/