使用具有渐变背景的CSS3转场
我试图用css悬停在缩略图上进行转换，这样在悬停时，背景渐变会淡入。转换不起作用，但如果将其简单地更改为rgba（）值，则可以正常工作。 渐变不支持？ 我也试过使用图像，它也不会过渡图像。
我知道这是可能的，因为在另一篇文章中有人这样做，但我无法弄清楚究竟如何。 任何帮助>这里有一些CSS可以使用：
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position:absolute;
width:200px;
height:150px;border: 1px #000 solid;
margin:30px;z-index:2
}
#container div a:hover {
background:-webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0,0,0,.7)), to(rgba(0,0,0,.4)))
}
渐变尚不支持转换（尽管目前的规格说他们应该支持像梯度一样通过插值来渐变转换）。
如果你想要使用背景渐变进行淡入效果，则必须在容器元素上设置不透明度 ，并将不透明度设置为“过渡”。
（有些浏览器版本支持梯度转换（例如IE10），去年我测试了渐变转换，他们似乎在当时工作，但我的测试代码不再有效 - 可能Matrix中存在一个小故障。）
一种解决方法是转换背景位置以产生渐变效果：http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
带背景位置的CSS3渐变过渡
尽管无法使用CSS transition属性直接设置渐变效果，但可以通过为background-position属性设置动画来实现简单的渐变动画：
这个代码很简单：
#DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position:100px;
} <div id="DemoGradient"></div> 解决方案是使用background-position来模仿渐变过渡。 这个解决方案几个月前在Twitter Bootstrap中使用。
更新
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
这是一个简单的例子：
链接状态
.btn {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 300;
position: relative;
display: inline-block;
text-decoration: none;
color: #fff;
padding: 20px 40px;
background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
悬停状态
.btn:hover {
background-position: 0 0;
}