Question

我的css3中有一个背景图像，其中定义了图像和渐变。我也希望在课程从on_time更改时进行转换 - ＆gt; 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

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

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

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

Answer 2

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

来源：Use CSS3 transitions with gradient backgrounds

Answer 3

不支持属性background-image

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

css过渡背景图像渐变

3 个答案: