CSS在悬停时背景图像之间淡入淡出

Question

有没有办法可以做到以下几点？

我有一个透明的png精灵,在左边显示标准图片,在右边显示:悬停状态的图片.

有没有办法可以让图像从左图像淡入到右图像中:仅使用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

li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

应该

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

不确定这是否可以解决问题。