在悬停时切换图像背景的最佳方法是什么？

Question

我想知道哪种方式最好。

我有一些半透明的锚图像，在悬停时将完全透明的背景改为半透明的红色背景：
- ＆gt;

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

选项1：使用1个通用图像在悬停时切换背景图像：


选项2：使用CSS3，但我不确定是否可能

顺便说一句。我已经阅读了很多关于CSS精灵的好看法，将网站上的整个图像定位转换为精灵时尚是一个好主意吗？或者仅推荐用于某些图像类型，例如锚点？

Answer 1

当您在整个网站上分割图像时，Sprites是一种很好的方式，例如电子邮件，电话，服务等图标，图像越多，创建的http请求越多，从而使您的网站无效。此外，使用CSS Sprites时，按钮不会在你将它们悬停时产生故障，是的，显然只是第一次用户可能会遇到一个小故障，但它会产生一个不好的印象，你可以通过使用CSS Sprites作为您只需更改图像的background-position即可。

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

另一方面，如果可以获得所需的效果，也可以使用CSS3。通过查看图像，我不认为甚至CSS3是必需的。如果这些不是真正的按钮，并且真正的按钮非常奇特，那么CSS Sprites将是一个很好的方式，因为IE会破坏你的CSS3按钮。

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

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