android - Android Chrome 中的 Webkit 反射 mask

Question

桌面电脑 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 上测试时，掩码并不是真正的掩码。它变成了一个普通的叠加渐变。如何将其变成真正的面具？在我的真实网站上，我有一个带图案的背景，所以普通的叠加渐变无法逐渐显示背景。

Answer 1

Android 浏览器不支持 webkit 渐变作为 box-reflects 的 mask 。但是，您可以使用 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