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