Android Chrome 中的 Webkit 反射遮罩答案

【问题标题】：Webkit reflection mask in Android ChromeAndroid Chrome 中的 Webkit 反射遮罩
【发布时间】：2011-07-02 01:44:38
【问题描述】：

台式电脑 Chrome

在台式计算机上使用 Chrome，我可以通过以下方式获得图像反射：

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

Android Chrome

在 Android 的 Chrome 上测试时，面具并不是真正的面具。它变成了一个简单的叠加渐变。如何将它变成真正的面具？在我的真实网站上，我有一个带图案的背景，所以普通的叠加渐变无法逐渐显露背景。

【问题讨论】：

我无法为您提供实际的 CSS，但 Android 不运行 Chrome 作为其浏览器。
我知道它不完全是 Chrome。它是 Chrome 的一些移动版本。它使用 Webkit 渲染。
@JoJo：不，它不是“Chrome 的某些移动版本”，就像 Safari 是“Chrome 的 Apple 版本”一样。标准的 Android 浏览器基于 WebKit，在其他方面与 Chrome 几乎没有相似之处。话虽如此，您可能会研究适用于 iOS 的技术，因为 iOS 和 Android 都将使用 WebKit 的移动版本，因此您可能可以通过这种方式找到解决方案。

标签： android css google-chrome

【解决方案1】：

Android 浏览器不支持将 webkit 渐变作为 box-reflects 上的遮罩。但是，您可以使用 PNG 掩码，并为避免额外的 HTTP 请求，将它们编码为 Base64 以在数据 URI 中使用：

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

您可以使用http://www.display-inline.fr/projects/css-gradient/ 等工具生成PNG 渐变，然后使用http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ 等工具将其转换为Base64

【讨论】：