html 文字倒映效果 如何用css实现文字渐变倒影？求教怎么做？

HTML部分

CSS部分body{background:#000;color:#f00}

.wrap{position:relative;}

.image{margin-bottom:3px;}

.down{position:relative;}

.reflection{width:421px;height:180px;background:url(1.jpg)bottomcenterno-repeat;

-webkit-transform:scaleY(-1);

-moz-transform:scaleY(-1);

-ms-transform:scaleY(-1);

-o-transform:scaleY(-1);

transform:scaleY(-1);

opacity:0.5;

filter:alpha(opacity='50');

}

.overlay{position:relative;width:421px;height:180px;bottom:149px;

background-image:-moz-linear-gradient(centerbottom,rgb(0,0,0)20%,rgba(0,0,0,0)90%);

background-image:-o-linear-gradient(rgba(0,0,0,0)10%,rgb(0,0,0)30%);

background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.20,rgb(0,0,0)),color-stop(0.90,rgba(0,0,0,0)));

filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0,EndColorStr=#000000);

}