借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
实现效果如下（鼠标hover）：
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比：
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果：
相关代码如下：
扩展资料：mozilla 使用 CSS transitions
方法：根据浏览者的分辨率自动调用样式表1、新建两个样式表分别命名为：1024.css 800.css（当然有更多分辨率，可以增加样式表）
2、在样式表中分别定义好图片作为网页背景。
3、新建一个网页文件，把下面代码复制过去。
<script language="JavaScript">
<!--
function test(){
var a=screen.width+".css"
//alert(a)
//测试变量a的值
document.getElementById("eric").href =a
}
//-->
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<link href="" rel="stylesheet" type="text/css" id="eric">
</head>
<body onLoad="test()">
</body>
</html>
搞定！
<style type="text/css">.divbglg {
height:130px
width:100%
background: -webkit-linear-gradient(#065eff, #fff) /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#065eff, #fff) /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#065eff, #fff) /* Firefox 3.6 - 15 */
background: linear-gradient(#065eff, #fff) /* 标准的语法,必须放最后 */
}
</style>
</head>
<body>
<div class="divbglg"></div>
</body>
我设置的是蓝色过渡到白色，并没有你所说的中间一条线啊！楼上那个兄弟所推荐的方法并没错，有问题的话可能是浏览器的问题，实在不行，你就直接做成1个像素的图片平铺得了
