的Webkit反射罩

desktop

有了Chrome在桌面計算機上，我可以得到的圖像反射：

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

的Android瀏覽器

android

在Android的Chrome上進行測試時，蒙版不是真正的蒙版。它變成了一個簡單的重疊漸變。我如何將它變成真正的面具？在我的真實網站上，我有一個圖案化的背景，所以簡單的疊加漸變將無法逐漸顯示背景。

來源

2011-07-02 JoJo

我不能幫你實際的CSS，但Android不會運行Chrome瀏覽器。 – user94154

我知道這不完全是Chrome。這是Chrome的一些移動版本。它使用Webkit渲染。 – JoJo

@JoJo：不，它不是「Chrome的一些移動版本」，不僅僅是Safari的「蘋果版Chrome」。標準的Android瀏覽器基於WebKit，否則與Chrome很少相似。話雖如此，你可能會研究在iOS上工作的技術，因爲iOS和Android都將使用WebKit的移動版本，因此您可以通過這種方式找到解決方案。 – CommonsWare

Android瀏覽器不支持將webkit漸變作爲框中反射的蒙版。但是，您可以使用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梯度並將其與轉換爲Base64像http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

來源

2012-06-03 21:10:00

的Webkit反射罩

回答

相關問題