Android上的CSS3文字漸變不起作用

Question

我試圖使用文本漸變，它適用於Chrome & Safari，但在Android上，它將漸變應用於內容而不是文本（所以不是使用漸變看到文本，您會看到一個帶有漸變的框 - 並不理想，尤其是因爲文本很重要）。

這裏是我的SASS混入：

@mixin text-gradient($from : #2bd2f2, $to : #218bb2) { 
    text-shadow: none; 
    background: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); 
    -webkit-background-clip: text; 
    -moz-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    color: transparent; 
} 

任何想法，爲什麼這不工作？

謝謝！

Answer 1

這應該適合你。在你的腳本中實現這一點，如果你喜歡，你可以更改你所有的變量。如果一切都失敗了，你可以在mixin之外使用它。

此腳本已在Android Chrome上測試並正常工作。

h1 { 
     text-shadow: none; 
     background: #2bd2f2; /* Failsafe color */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2bd2f2), color-stop(99%, #218bb2)); 
     background: -webkit-linear-gradient(top, #2bd2f2 0%, #218bb2 99%); 
     background: linear-gradient(to bottom, #2bd2f2 0%, #218bb2 99%); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
} 

正如你可能已經發現這種方法與很多瀏覽器不兼容。這就是爲什麼我可能會推薦html5中的畫布選項來繪製漸變文字。 這些鏈接可以幫助你。

https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-3/text-and-the-canvas-context

https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-3/text-with-gradients-and-patterns