image - 悬停时背景图像之间的 CSS 淡入淡出

Question

有什么办法可以做到以下几点？

我有一个透明的 png Sprite ，它在左侧显示标准图片，在右侧显示 :hover 状态的图片。

有没有一种方法可以让图像在 :hover 上从左图像淡入右图像仅使用 css3 过渡？我尝试了以下方法，但它不起作用:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

现在，上面的代码确实为背景设置了动画，它平移了图像。我想要的不是平底锅，而是淡入淡出或溶解效果。

更新:我最终不得不创建两个元素并分别为不透明度设置动画。这有点困惑，因为我必须指定每个元素的确切边距，但我想它会起作用。感谢大家的帮助:)

Answer 1

关于这个主题的最新消息:

Chrome 19 及更新版本支持背景图像转换:

演示: http://dabblet.com/gist/1991345

附加信息: http://oli.jp/2010/css-animatable-properties/