悬停时切换图像背景的最佳方法？

Question

我想知道哪种方式是最好的。

我有改变完全透明背景的半透明红色背景上悬停一些半透明的锚图片：
- >

雇主给我提供了红色背景的版本为每个图像，但当然我不想使用它们，因为这会带来总带宽浪费。相反，我想

选项1：


选项2：与1个万能镜像悬停切换背景图像使用CSS3，但我不知道是否有可能

BTW。我已经阅读了许多关于CSS精灵的好评，将网站上的整个图像定位转换为精灵时尚是一个好主意？还是只推荐用于某些图像类型，比如锚？

Answer 1

当你在你的网站上有碎片图像时，精灵是一个好方法，比如说像电子邮件，电话，服务等图标，你拥有的图像越多，它创建的请求就越多，从而使你的网站无效。此外，使用CSS Sprites时，按钮不会在您将鼠标悬停时产生小故障，显然只有第一次用户可能会遇到小故障，但这会给您带来一个糟糕的印象，您可以通过使用CSS Sprites你将不得不改变图像的background-position。

来到按钮，如果你想要的话，你可以简单地使用CSS精灵，将按钮状态放在一个画布上，然后使用background-image属性使用它们，稍后在悬停时使用background-position属性切换它们。

另一方面，如果你想要的效果是可能的，你也可以使用CSS3。通过查看图像，我不认为即使是CSS3也是必需的。如果这些不是真正的按钮，并且真正的按钮是特别的花式，那么CSS Sprites将是一个好方法，因为IE会破坏你的CSS3按钮。

就透明度而言，您可以使用rgba()，其中a代表不透明度。您还可以使用CSS转换来美化它们，以获得更平滑的悬停效果。

如果您想快速了解CSS Sprite是什么以及如何使用它们，您可以阅读我的回答here。