webkit-box-反射android上的錯誤

我想在移動webview應用程序（android和ios：so webkit）上添加反射。我實現了一個webkit-box-reflection，就像我在包括stackoverflow在內的相當不錯的網站上看到的一樣。webkit-box-反射android上的錯誤

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

我獲得在Android android behaviour

而且像所有其他的Webkit chrome behaviour

正如你可以在Android上看到的東西，有沒有反思，因爲它沒有被屏蔽，但它只是把梯度放在反射圖像上。（似乎是webkit手機上的面具錯誤）。我可以很容易地把另一種顏色比白色（綠色）和反向的方向，但我需要一個背後的圖像，而不是一個普通的背景。

有人有想法嗎？所有的網站，我看到不提Android或只顯示在單色背景的工作......

來源

2012-02-21 Ernoriel

使用透明圖像的面膜

-webkit-箱反映：低於0像素網址（「image.png」）;在Android 2.3的

來源

2012-03-23 01:23:44

的Android瀏覽器爲我

它的工作不支持WebKit的梯度爲口罩箱反映。正如Ali.MD指出的那樣，您可以使用PNG圖像作爲蒙版。

爲了避免增加另一個HTTP請求，您還可以在PNG轉換成數據URI的東西，如http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/：

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

來源

2012-06-03 21:14:13

webkit-box-反射android上的錯誤

回答

相關問題