使用 CSS3 反射图像的一部分

Question

目前我有这张图片：

我被要求做的是给它这个效果：

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

我曾尝试在 CSS3 中使用 opacity 和 webkit-reflection，但没有成功。

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

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

请记住：

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

更新

到目前为止，我的代码在 chrome only 中正确反映，但不透明度无法正常工作。我有这个：

-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

Answer 2

您可以使用 CSS 3：

.reflect  { 
  -webkit-box-reflect: below 0
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

或者像这样的替代方案： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/

Answer 3

使用此代码：

.infrareporting_host_0::before,
.infrareporting_host_0::after
{
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;
  width: inherit;
  height: inherit;
  display: block;
}
 
.infrareporting_host_0::before
{
  background: inherit;
}

有关详细信息，请参阅Crossbrowser CSS3 Reflections。