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

我有一个图像，我想在Chrome浏览器中使用CSS在图像底部下方反映出来。图像是在div内，我约束了图像的最大高度和最大宽度。css反映了麻烦 - 反映了图像的错误部分

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

这里是工作示例的链接：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>

谁能帮我解决这个问题？

来源

2012-08-09 bartski

<div>限制反射图像的位置。一个设置为height像素和overflow:hidden它无处可去，所以反射的图像向上移动以适应。暂时删除 HTML <div>标签以查看我的意思。（或删除overflow:hidden）。

这是你想要的吗？

http://jsfiddle.net/8a8NU/

我只是删除overflow:hidden，改变了color-stop至80％。

来源

2012-08-09 07:01:49 finlaybob

div高度实际上并未引起问题。如果您移除img上的最大高度和最大宽度，则图像反映得很好。 – bartski 2012-08-09 07:07:51

我需要溢出：隐藏。你有这个解决方案吗？ – bartski 2012-08-12 15:13:59

所有的诚实我都不知道......我注意到，如果你删除图像的“高度/宽度”或“最大高度/最大宽度”，它会按照你的要求工作，但我猜你也需要这个。也许如果你事先调整图像大小？ – finlaybob 2012-08-13 12:37:56

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)); 
}

来源

2012-08-09 07:21:31

你必须减少图像的大小。

see demo

来源

2012-08-09 07:37:54 gaurang171

但你删除了溢出：隐藏，这是一个要求 – bartski 2012-08-12 15:13:15

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

回答

相关问题