webkit-box-reflect在android上的bug

Question

我试图在移动webview应用程序上添加反射（android和ios：仅限webkit）。我实现了一个webkit-box-reflect，就像我在很好的网站上看到的那样，包括stackoverflow。

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

我在android上获得了

在所有其他webkit上都有类似的东西

正如你在android上看到的那样，没有任何反射，因为它没有被掩盖，但它只是将渐变放在被反射的图像上。 （似乎是webkit手机上的掩码错误）。我可以轻松地添加另一种颜色而不是白色（绿色）并反转方向，但我需要一个背后的图像，而不是简单的背景。

有人有想法吗？我看到的所有网站都没有提及android或只是在简单的背景上展示他们的作品......

Answer 1

Android浏览器不支持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==);
}

Answer 2

使用透明图像进行遮罩

-webkit-box-reflect：低于0px url（'image.png'）;

它在android 2.3中为我工作