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