CSS3 transiton过渡与CSS3 渐变 无效原因及解决方法

无效原因：

    我们使用CSS3的gradient渐变属性是被当成背景图片(background-img)来看的。emmm以前我们是通过加载图片来实现渐变色的效果，现在是通过CSS3的gradient渐变属性就能来实现，也就是说让浏览器自己去绘制出渐变图片而减少一次图片的请求了。

而背景图片并不能使用transition过渡啊...那既然是图片不就能跟平时一样通过opacity透明度来实现过渡效果吗

解决方法

1：两个设置了渐变色的元素层叠后，通过过渡一个透明度的0到1的元素来实现渐变色渐入渐出

代码如下

复制代码去试试吧。

2：设置了渐变色的元素后的background-color是默认的初始值，所以可以通过这个来过渡来实现平滑的渐出效果

原理是当鼠标移到div1时，背景图片的被设置成渐变色，背景颜色为#f2f2f2（背景图片在背景颜色上），当两样发生变化时transition过渡开始生效，在0.33s内背景颜色从#fbfbfb过渡到#f2f2f2，但因为有渐变图的覆盖，所以没有渐入效果，但鼠标移出时，背景图片失效，背景颜色从#f2f2f2过渡到#fbfbfb（ease-in-out是相对于linear的匀速，慢速过渡），达到淡出效果

注意背景图和背景颜色的书写顺序不能改变，不然background的复合写法会覆盖上面的background-color，当鼠标移出时，就会从初始值（rgba(0,0,0,0)）颜色到本身的#fbfbfb过渡

-----------------------------------------------------我是分割线------------------------------------------------------

CSS3 transiton过渡与CSS3 渐变 无效原因及解决方法就到这啦，如果我写的有什么问题或不清楚的地方，希望大家能在评论里指出，我会及时修改的。