背景图像渐变上的css过渡答案

【问题标题】：css transition on background image gradient背景图像渐变上的css过渡
【发布时间】：2012-12-29 09:57:45
【问题描述】：

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

【问题讨论】：

标签： html css webkit css-transitions

【解决方案1】：

不可能在背景渐变上进行过渡。但是您可以查看此链接以使其与“黑客”一起使用：http://nimbupani.com/some-css-transition-hacks.html

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

这是一个类似的问题，附带更多链接和信息：Use CSS3 transitions with gradient backgrounds

【讨论】：

【解决方案2】：

“渐变还不支持过渡（尽管规范说它们应该）。如果你想要一个带有背景渐变的淡入效果，你必须在容器上设置不透明度并转换不透明度。”

来源：Use CSS3 transitions with gradient backgrounds

【讨论】：

【解决方案3】：

不支持属性background-image

http://www.w3.org/TR/css3-transitions/#animatable-css

【讨论】：