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