css3设置图片倒影代码 支持chrome和firefox
下面是使用css代码来设置图片倒影的，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3设置图片倒影方法</title><style type="text/css"> /**-webkit-gradient:-运用CSS3渐变色(Gradients)功能给倒影增加消隐效果**/ .pic{ background: url('http://img0.bdstatic.com/img/image/shouye/bzhczw-9567323286.jpg'); width: 211px; height: 288px; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3))); margin: 0 0 300px 0 ; } #eml{ position: relative; /* 给倒影留下空间 */ margin-bottom: 211px; } #eml:before { content:""; /* needed or nothing will be shown */ background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)),-moz-element(#eml)bottom left no-repeat; -moz-transform: scaleY(-1); /* flip the image vertically */ position: absolute; height:288px; width: 211px; top: 288px; left:0px; }</style></head><body> <div class="pic"> </div> <div id="eml" style="width: 211px;height: 288px;"> <img src="http://img0.bdstatic.com/img/image/shouye/bzhczw-9567323286.jpg" width="211px" height="288px"></img> </div></html> |
效果图：
来源：//作者：/更新时间：2014-05-31
顶
踩
相关文章：
