CSS在背景图片之间渐变 [英] CSS Fade Between Background Images on Hover

问题描述

有没有办法可以做下面的事？

Is there a way that I can do the following?

我有一个透明的png精灵在左边显示一个标准图片，一个图片为：

I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.

有一种方法，我可以让图像从左图像淡入到右图像：hover只使用css3过渡？我试过下面的，但它不工作：

Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:

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;}

现在，图像横跨。

更新：我最终不得不创建两个元素，而只是分别动画化不透明度。这是一个tad凌乱，因为我必须指定每个元素的确切边距，但我想它会工作。感谢所有人的帮助：）

UPDATE: I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)

推荐答案

您尚未指定任何代码来进行实际转换。

You haven't specified any code to do the actual transition.

http://css3.bradshawenterprises.com/cfimg1/

在您的悬停风格中尝试此操作：

Try this out in your hover style:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;

这篇关于CSS在背景图片之间渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！