新浏覽器的(de)實現
指的(de)是firefox、chrome和(hé)IE9。新浏覽器都支持CSS3新添的(de)transform屬性，所以實現倒影(yǐng)效果非常簡單。從下(xià)面的(de)代碼看到，各家浏覽器對(duì)transform的(de)實現有點不同
-webkit-transform: scaleY(-1); /* webkit内核浏覽器的(de)實現，例如safari */
-moz-transform: scaleY(-1); /* firefox 的(de)實現 */
-ms-transform: scaleY(-1); /* IE 的(de)實現 */
-o-transform: scaleY(-1); /* Opera的(de)實現 */
<div class="wrap"> <div class="image"><img src="1.jpg" /></div> <div class="down"> <div class="reflection"></div> <div class="overlay"></div> </div> </div>
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); } 在倒轉的(de)圖片上面還(hái)加了(le)一個(gè)DIV.overlay層，做(zuò)出漸變的(de)效果，使倒影(yǐng)看起來(lái)更真實。
兼容舊(jiù)浏覽器的(de)實現
考慮到還(hái)有相當多(duō)的(de)人(rén)在使用(yòng)舊(jiù)版浏覽器，程序員(yuán)絞盡腦(nǎo)汁爲這(zhè)部分(fēn)人(rén)做(zuò)兼容。這(zhè)裏指的(de)是IE7/IE8。IE6怎麽辦？提示用(yòng)戶升級浏覽器吧。
舊(jiù)IE不支持transform屬性，可(kě)以使用(yòng)濾鏡 filter:flipv 來(lái)生成圖片倒轉，但會跟IE9的(de)transform沖突。所以要用(yòng)到各種 hack 來(lái)解決。修改後的(de)CSS如下(xià)，添加了(le)IE9 hack，覆蓋掉上面的(de)filter:flipv的(de)屬性。
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:flipv alpha(opacity='50'); /*ALL IE*/ } @media all and (min-width:0) { .reflection{filter:alpha(opacity='50') \0/;} /*IE9*/ } .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); }
