web 页面中制作倒影的一种方法

来源:达内山东中心 网址：www.sdtarena.com

在web中需要制作图片的倒影效果的文件比较多，但要制作整个div 块的倒影介绍却很少，在网上也很少有相关资料，先把拙见介绍一下，共同学习改进。

步骤：

1，在页面中正常实现div 内容；

2，增加一个相同的div内容, 采用绝对位置，放置在原div的下方；

3，添加一个渐变的透明蒙板，大小位置与第二个div相同；

4, 采用css设置第二个div的显示特性和蒙板的特性。

[b][color=#FF0000]实例[/color]：

web 片段：[/b]

//原始div段

<div class="product_1" style="z-index: 2;background: white; cursor: pointer;" i="25"><img class="image_1_small_25" i="25" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1XumvXfVKXXb0RUoY_031044.jpg_310x310.jpg" style="margin-top: 5px; margin-right: 105px; margin-bottom: 5px; margin-left: 105px; width: 390px; height: 390px; "></div>

//倒影div段

<div class="product_reflect_1" style="z-index: 2;background: white;"><img class="image_1_small_25" i="25" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1XumvXfVKXXb0RUoY_031044.jpg_310x310.jpg" style="margin-top: 5px; margin-right: 105px; margin-bottom: 5px; margin-left: 105px; width: 390px; height: 390px; "></div>

//蒙板

<div id="gproduct_reflect_b_25" class="product_reflect_1" style="z-index: 3;background: url(/images/product_reflect_1.png) repeat-x;"><div></div></div>

[b]CSS:[/b]

.product_reflect_1 {

display: block;

position: absolute;

width: 600px;

height: 400px;

top: 405px;

left: 0;

z-index: 1;

background: white;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-o-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-webkit-transform. matrix(1,0,0,-1,0,0);

-moz-transform. matrix(1,0,0,-1,0,0);

-o-transform. matrix(1,0,0,-1,0,0);

-ms-transform. matrix(1,0,0,-1,0,0);

transform. matrix(1,0,0,-1,0,0);

filter: flipv alpha(opacity=25,finishopacity=0,style=1,starty=0,finishy=400,startx=0,finishx=0);

}

.product_1 {

position: absolute;

width: 600px;

height: 400px;

top: 0;

left: 0;

z-index: 1;

background: white;

display: block;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-o-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

box-shadow: 0 1px 2px rgba(0,0,0,0.5);

}