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) bottom center no-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(center bottom, 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, left bottom, left top, 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);

}