背景图像渐变上的css过渡

Posted 2023-03-06

技术标签:

【中文标题】背景图像渐变上的css过渡【英文标题】：css transition on background image gradient 【发布时间】：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;

【问题讨论】：

【参考方案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】：