image - 使用 CSS3 反射图像的一部分

Question

此刻我有这张图片:

我被要求做的是赋予它这种效果:

忘掉背景颜色 - 注意下方图像部分的反射，颜色仍然相同，但具有不透明风格的效果。

我曾尝试在 CSS3 中使用不透明度和 webkit 反射，但没有成功。

我现在已经删除了该代码，因为它不起作用，我只剩下原始图像:

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

请记住:

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

更新

到目前为止，我的代码在 仅 chrome 中正确反射(reflect)，但不透明度无法正常工作。我有这个:

-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