Question

我想要在Chrome中使用CSS在图像底部下方反射一个图像。图像在div内部，我已经约束了图像的最大高度和最大宽度。

反射的图像显示图像的顶部而不是图像的底部。

以下是工作示例的链接：go

以下是代码：

<!DOCTYPE HTML>
<html>
 <head>
  <style>
    img{   
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
      max-height:315px;max-width: 220px;
    }
    div{overflow:hidden;height:275px;border:1px solid green}</style>
 </head>

 <body>
  <div>
     <img src="http://www.oracledigital.com.au/wp-content/uploads/2012/05/google-penguin-update.png" />
  </div>
  </body>
</html>

任何人都可以帮我解决这个问题吗？

Answer 1

<div>约束反射图像的去向。设置为height的像素和overflow:hidden无处可去，因此反射的图像向上移动以适应。删除 HTML <div>标签暂时可以看到我的意思。（或删除overflow:hidden）。

这更像你想要的吗？

http://jsfiddle.net/8a8NU/

我只是删除了overflow:hidden并将color-stop更改为80％。

Answer 2

http://jsfiddle.net/TYfh9/3/

Demo

<div> 
  <img src="http://www.oracledigital.com.au/wp-content/uploads/2012/05/google-penguin-update.png" class="reflectBelow" />
</div>

<强> CSS

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

Answer 3

您必须缩小图像的大小。

see demo

css反映了麻烦 - 反映了图像的错误部分

3 个答案: