我有一个网站，我目前没有在其中使用 sprite 来存储图像。相反，我直接引用单个图像。我现在想将所有静态图像放在一个 Sprite 中以优化我的网站。
目前，我正在为悬停图像使用 transition: background-image 0.5s; CSS 效果。当鼠标悬停时，这会产生漂亮的“淡入淡出”效果。
JSFiddle 显示了两个发生这种淡化过渡效果的示例: http://jsfiddle.net/VsVpU/
问题是，如果我使用 sprites，background-image 必须更改为 background-position，这会将效果从之前的淡入淡出效果更改为垂直/水平滑动效果。
如何切换到 sprite，同时保持现有的淡入淡出过渡效果，并且不更改源 HTML？
我不想更改 HTML，因为这会导致很多更改。这可以仅使用 CSS 来实现吗？或者使用 CSS + jQuery/JavaScript ？ .. 虽然我也想在这里避免使用 JavaScript，但如果可能的话..
编辑:
解决方案也应该是跨浏览器兼容的..
最佳答案
您需要创建 2 个 Sprite 图像，一个用于正常状态，另一个用于悬停状态。
两个图像中特定元素背景的坐标必须相同。
然后，从正常状态到悬停状态的转换是在图片url中完成的，而不是在坐标中完成的
关于javascript - 如何在保持现有过渡的同时切换到 Sprite 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19049288/