css过渡背景图像渐变

Question

我的css3中有一个背景图像,图像和渐变定义.我也想在类改变on_time时进行转换 - > too_late或反之亦然.

我无法在渐变上获得过渡.这是以某种方式支持css3吗？

谢谢

div.too_late
{
    color: White;        
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);       

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;    
}

div.on_time
{
    color: #222;        
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);    

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;           
}

Answer 1

在背景渐变上不可能有过渡.但你可以看看这个链接,使它与"hacks"一起使用:http://nimbupani.com/some-css-transition-hacks.html

您还可以通过使用背景位置移动使其看起来像是在变化:http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

这是一个类似的问题,有更多的链接和信息btw:使用渐变背景的CSS3过渡

Answer 2

"渐变不支持过渡(虽然规范说它们应该).如果你想要一个带有背景渐变的淡入效果,你必须在容器上设置不透明度并转换不透明度."

来源:使用渐变背景的CSS3过渡