0

我有一张图片，我想在 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>

谁能帮我解决这个问题？

4

3 回答 3

0

<div>反射图像去向的约束。以height像素为单位，overflow:hidden它无处可去，因此反射图像向上移动以适应。<div>暂时删除 HTML 标记以了解我的意思。（或删除overflow:hidden）。

这是你想要的更多吗？

http://jsfiddle.net/8a8NU/

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

于 2012-08-09T07:01:49.310 回答
0

您必须减小图像的大小。

看演示

于 2012-08-09T07:37:54.193 回答
0

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

演示

<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)); 
}
于 2012-08-09T07:21:31.253 回答