使用CSS3反映图像的一部分

Question

目前我有这个图像:

我被要求做的就是给它这样的效果:

忘记背景颜色 - 注意下面图像部分的反射,仍然是相同的颜色,但具有不透明风格的效果.

我曾尝试在CSS3中使用不透明度和webkit反射,但没有运气.

我现在已经把代码拿出来,因为它不起作用,我只剩下原始图像:

.infrareporting_host_0 {
    background: url("../interface/infrareporting/hostLightGreen.png") no-repeat scroll 0 0 transparent;
}

请记住:

• 我只想要显示的内容 - 图像的下半部分反射,而不是整个图像反射
• 如何仅淡化反射图像的不透明度？正常的我想保持不变但淡化反射
• 跨浏览器解决方案是最好的(我只能在chrome中执行)

更新

到目前为止,我的代码仅在chrome中正确反映,但不透明度无法正常工作.我有这个:

-webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

Answer 1

你可以这样做:

HTML:

<div class="image-block">
   <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
   <div class="reflection">
      <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
      <div class="overlay"></div>
   </div>
</div>?

css:

.image-block { width:78px; margin:0px 10px; float:left; } 
.reflection { position:relative; } 
.reflection img { 
    -webkit-transform: scaleY(-1); 
       -moz-transform: scaleY(-1); 
        -ms-transform: scaleY(-1); 
         -o-transform: scaleY(-1); 
            transform: scaleY(-1); 
    filter: flipv; opacity:0.20; 
    filter: alpha(opacity='20'); 
} 
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px; 
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%); 
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%); 
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0))); 
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff); 
} 

​

在这里查看现场演示:demo