其实可以这样，你将背景图片设置高一点，大概300像素-400像素高度左右，然后以渐变图片最下面的颜色为背景色，这样就可以无限背景平铺下去。
css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so U can't transition gradients for now.
但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。
css：
<style>body{
margin: 0
padding: 0
}
.gavin_design div{
width: 200px
height: 200px
margin: 20px auto
}
.no{
background: #ccc
-webkit-transition: all 2s linear
}
.no:hover{
background: #f60
}
.line{
position: relative
background: -webkit-linear-gradient(top,#f60,#47CC38)
}
.line_gavinfix{
position: absolute
top: 0
left: 0
width: 100%
height: 100%
opacity: 0
background: -webkit-linear-gradient(top,#47CC38,#f60)
-webkit-transition: opacity 2s linear
}
.line:hover .line_gavinfix{
opacity: 1
}
</style>
html：
<div class="gavin_design"><div class="no"></div>
<div class="line"><span class="line_gavinfix"></span></div>
</div>
预览一下，怎么样？是你需要的么^.^
