安卓系统中的webkit-box-reflect错误问题

Question

我正在尝试在一个移动 Webview 应用程序上添加反射效果（Android 和 iOS：因此仅适用于webkit）。我实现了一个类似于我在一些非常好的网站上看到的 webkit-box-reflect。

"-webkit-box-reflect: below -14px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));"

我在安卓上得到的效果如下图所示： 而其他所有基于 Webkit 的浏览器则会显示如下图所示： 可以看出，在安卓上并没有反射效果，因为它没有被遮罩，只是在反射图像上添加了渐变色。（在 Webkit 移动端中似乎存在一个遮罩错误）。我可以很容易地将颜色更改为绿色并反转方向，但我需要一张图片作为背景，而不是纯色背景。

有人有什么想法吗？我看到的所有网站都没有提到安卓，或者只是在纯色背景上展示他们的工作...

- Ernoriel

Answer 1

安卓浏览器不支持将webkit渐变作为盒反射的遮罩。如Ali.MD所述，您可以使用PNG图像作为遮罩。

为了避免增加另一个HTTP请求，您还可以使用类似http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/的工具将PNG转换为数据URI：

img {
  -webkit-box-reflect: below 0 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAyCAYAAACUEBHwAAAAIklEQVQ4jWP8//8/AzpgwhAZFRwVHBUctIIsDAwMXFQWBAAW4QORoT0UUQAAAABJRU5ErkJggg==);
}

- Karl Horky

Answer 2

使用透明图像进行遮罩

-webkit-box-reflect:below 0px url('image.png');

在Android 2.3中对我有效

- S. Ali Mihandoost