我想知道哪种方法是最好的。
我有一些半透明的锚图像，它们在悬停时将完全透明的背景更改为半透明的红色背景：
->
雇主为我提供了每张图像的红色背景版本，但是我当然不希望使用它们，因为这会浪费全部带宽。相反，我想
选项1：使用1张通用图片在悬停时切换背景图片：
选项2：使用CSS3，但我不确定是否可行
顺便说一句我已经阅读了许多关于CSS Sprite的好意见，将网站上的整个图片定位转换为Sprite方式是一个好主意吗？还是仅推荐用于某些图像类型（例如锚点）？
最佳答案
如果您在整个网站上分散了图像，例如电子邮件，电话，服务等图标，则Sprites是一个不错的选择，您所拥有的图像越多，创建的http请求就越多，从而使您的网站效率低下。另外，使用CSS Sprites时，将鼠标悬停在按钮上不会产生故障，是的，显然，只有第一次用户可能会遇到故障，但是总体上会产生不良印象，您可以使用CSS Sprites来克服这些故障。您只需要更改图像的background-position。
来到按钮上，如果需要，您可以简单地使用CSS Sprites，将两个按钮状态都放在一个画布上，并使用background-image属性使用它们，然后在悬停时使用background-position属性进行切换。
另一方面，如果可能，可以使用CSS3。通过查看图像，我认为甚至不需要CSS3。如果这些不是真正的按钮，并且真正的按钮特别有趣，那么CSS Sprites将是一个不错的选择，因为IE会破坏您的CSS3按钮。
就透明度而言，可以使用rgba()，其中a代表不透明度。您还可以使用CSS Transitions来美化它们，以获得更流畅的悬停效果。
如果您想快速了解CSS Sprite是什么以及如何使用它们，可以阅读我的答案here。
关于css - 悬停时切换图像背景的最佳方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18270686/