反射梯度

Question

我具有用於顯示其使用-webkit梯度的元件上的反射到淡出一些CSS：

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); } 

• 在支持瀏覽器-webkit-箱反映如鉻，這顯示瞭如預期逐漸淡化的元素的反射。
• 在不支持它的瀏覽器上，沒有反射顯示。

但是，在Android的瀏覽器上顯示反射，但不會淡出。

有越來越的Android任的任何方式：

1. 淡出的反射，或
2. 沒有顯示的反射都沒有。

我知道我可以使用JavaScript來檢測瀏覽器，並相應地改變風格，但我更喜歡一個唯一的CSS的解決方案。

Answer 1

CSS不是爲了處理這樣的東西而設計的。換句話說：不，這是不可能的。

Answer 2

我有類似的問題試圖做背景梯度東西，在Android瀏覽器，它似乎完全不支持

不幸的是，上面的回答是正確的，有沒有一種方式，來分割你的聲明瞭一個不錯的逐漸增強的方式。您可以像您提到的那樣使用JavaScript/modernizr，並且至少設置一個支持類（es），以便您實際上不必在代碼中翻轉樣式。

您可以嘗試使用HTML畫布元素來重現此效果，在圖像中使用drawImage並對其進行變形。儘管移動webkit中的canvas可能會很慢。

祝你好運

Answer 3

在Android瀏覽器中所有的梯度都可以工作嗎？ 如果他們這樣做，請確保您使用的是正確的版本。您可能需要使用舊的webkit格式。 如果沒有，只需使用modernizr將其隱藏在不支持漸變的地方。

Answer 4

沒有示例文件或鏈接，就很難看到你需要什麼。

幾個月前，我也玩過一些反射的東西，沒有找到任何可以做你描述的東西。在代碼之外，我有一些步驟可以讓你得到你想要的。我建議您希望反映的項目是透明背景上的PNG，以開始。

的步驟： 1.Take圖像成自己喜歡的圖像處理程序（實施例的Photoshop）

1. 雙人或延伸帆布必要量的圖像以包括在適當的方向上的反射
2. 複製圖層（Photoshop圖層/複製圖層）
3. 反映圖像。（Photoshop的層/圖像旋轉/翻轉畫布（您的方向））
4. 移動複製層，使得其使用移動工具
5. 選擇侯爵工具顯示爲一個反射鏡，和邊緣模糊設定爲約您的原始圖像寬度的50％。
6. 將光標懸停在「反映」層，如果說選擇線將不可見的，除非它說選擇什麼也不用擔心。如果沒有選擇任何內容，請將您的邊緣模糊度降至25％左右，然後重試。
7. 有選擇一旦你，無論是可見或不可見，刪除所選區域。這應該給你一個「反映」的樣子。
8. 如果需要的話，下面的一切圖層上添加一個背景。
9. 保存圖片爲JPG，如果你沒有一個透明的背景或PNG，如果你做的事。使用它代替您反映的圖像和代碼淡化的圖像。這將主要是瀏覽器兼容。