css3,filter实现背景背景渐变的效果
![](http://images0.cnblogs.com/blog/219980/201306/07154112-69d5f708930748af9f194d7535b2015b.jpg)
![](http://images0.cnblogs.com/blog/219980/201306/07154123-dcb470a49667434d9e7c4fa82770e843.jpg)
![](http://images0.cnblogs.com/blog/219980/201306/07154134-2dd2ffd2102c4130af351d857e1e1e31.jpg)
<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等坐标参数没有意义,都是以图片中心为起始,四周为结束