css3,filter实现背景背景渐变的效果
<style type="text/css">
*{ text-align:center;}
img{ filter:alpha(opacity=100, finishopacity=0,style=2); }
#gradient{ width:300px; height:224px; position:absolute; top:0; left:350px; background:-webkit-gradient(radial,150 112, 120, 150 112, 40, from(rgba(255,255,255,1)),to(rgba(255,255,255,0))); background:-moz-repeating-radial-gradient(ellipse cover, rgba(255,255,255,0) ,rgba(255,255,255,1) 70%,rgba(255,255,255,1));}
.gradientbg{width:185px; height:138px; margin:0 auto; background:-webkit-gradient(radial,92 69, 60, 92 69, 10, from(rgba(255,255,255,1)),to(rgba(255,255,255,0))),url(img/bike.jpg); background:-moz-repeating-radial-gradient(ellipse cover, rgba(255,255,255,0) ,rgba(255,255,255,1) 70%,rgba(255,255,255,1)),url(img/bike.jpg); background:url(img/bike.jpg) \9; filter:alpha(opacity=100, finishopacity=0, style=2);}
</style>
</head>
<body>
<div style="position:relative; width:1000px; margin:0 auto;">
<img src="img/bike.jpg" alt="" width="300" />
<div id="gradient"></div>
</div>
<div class="gradientbg"> </div>
</body>
-webkit-gradient(radial,92 69, 60, 92 69, 10, from(rgba(255,255,255,1)),to(rgba(255,255,255,0))
):radial是指径向渐变，92 69, 60内圆半径为60,圆心坐标为(92,69);92 69, 10圆心坐标为(92,69)，内圆半径为10；
-moz-repeating-radial-gradient(ellipse cover, rgba(255,255,255,0) ,rgba(255,255,255,1) 70%,rgba(255,255,255,1)),url(img/bike.jpg):forefox中的径向渐变；
filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)：opacity代表透明度等级，可选值从0-100,0代表完全透明，100代表完全不透明。style代表透明区域的形状特征，0代表统一形状，1代表线形，2代表圆形放射渐变，3代表矩形放射渐变。style为2或3的时候，startX和startY等坐标参数没有意义，都是以图片中心为起始，四周为结束
