Отражающая маска Webkit в Android Chrome

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

При тестировании на Android Chrome маска на самом деле не является маской. Это становится простым градиентом наложения. Как мне превратить его в настоящую маску? На моем реальном веб-сайте у меня есть узорчатый фон, поэтому простой градиент наложения не сможет постепенно показать фон.

Answer 1

Браузер Android не поддерживает градиенты веб-наборов, так как маски на коробках отражаются. Однако вы можете использовать маски PNG и, чтобы избежать дополнительного HTTP-запроса, закодируйте их как Base64 для использования в URI данных:

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

Вы можете сгенерировать PNG-градиент, используя такие инструменты, как http://www.display -inline.fr / projects / css-градиент / и преобразовать его в Base64 с помощью чего-то вроде http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/