通過CSS對文本的漸變效果不適用於FF

Question

我對FF和應用於文本的漸變有問題。

我創建了這個CSS一個jsfiddle：

rainbow{ 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #4d2dac), color-stop(0.03, #542ea8), color-stop(0.06, #5b2fa0), color-stop(0.09, #64319a), color-stop(0.12, #6d3193), color-stop(0.15, #75338c), color-stop(0.18, #7f3486), color-stop(0.21, #8b357e), color-stop(0.24, #933776), color-stop(0.27, #9f386e), color-stop(0.30, #ab3a65), color-stop(0.33, #b63e61), color-stop(0.36, #bd476a), color-stop(0.39, #c25074), color-stop(0.42, #c8587c), color-stop(0.45, #d06287), color-stop(0.48, #d86b92), color-stop(0.51, #dd7492), color-stop(0.54, #e17f80), color-stop(0.57, #e58b6d), color-stop(0.60, #eb955c), color-stop(0.63, #ef9e4c), color-stop(0.66, #eca348), color-stop(0.69, #e7a547), color-stop(0.72, #e3a946), color-stop(0.75, #dfab46), color-stop(0.78, #daae45), color-stop(0.81, #d6b244), color-stop(0.84, #d2b442), color-stop(0.87, #cdb841), color-stop(0.90, #c7bb41), color-stop(0.93, #c3be40), color-stop(0.96, #bfc241), color-stop(1, #bcc33e)); 
    background-image: -moz-gradient(linear, left top, right top, color-stop(0, #4d2dac), color-stop(0.03, #542ea8), color-stop(0.06, #5b2fa0), color-stop(0.09, #64319a), color-stop(0.12, #6d3193), color-stop(0.15, #75338c), color-stop(0.18, #7f3486), color-stop(0.21, #8b357e), color-stop(0.24, #933776), color-stop(0.27, #9f386e), color-stop(0.30, #ab3a65), color-stop(0.33, #b63e61), color-stop(0.36, #bd476a), color-stop(0.39, #c25074), color-stop(0.42, #c8587c), color-stop(0.45, #d06287), color-stop(0.48, #d86b92), color-stop(0.51, #dd7492), color-stop(0.54, #e17f80), color-stop(0.57, #e58b6d), color-stop(0.60, #eb955c), color-stop(0.63, #ef9e4c), color-stop(0.66, #eca348), color-stop(0.69, #e7a547), color-stop(0.72, #e3a946), color-stop(0.75, #dfab46), color-stop(0.78, #daae45), color-stop(0.81, #d6b244), color-stop(0.84, #d2b442), color-stop(0.87, #cdb841), color-stop(0.90, #c7bb41), color-stop(0.93, #c3be40), color-stop(0.96, #bfc241), color-stop(1, #bcc33e)); 
    background-image: -ms-gradient(linear, left top, right top, color-stop(0, #4d2dac), color-stop(0.03, #542ea8), color-stop(0.06, #5b2fa0), color-stop(0.09, #64319a), color-stop(0.12, #6d3193), color-stop(0.15, #75338c), color-stop(0.18, #7f3486), color-stop(0.21, #8b357e), color-stop(0.24, #933776), color-stop(0.27, #9f386e), color-stop(0.30, #ab3a65), color-stop(0.33, #b63e61), color-stop(0.36, #bd476a), color-stop(0.39, #c25074), color-stop(0.42, #c8587c), color-stop(0.45, #d06287), color-stop(0.48, #d86b92), color-stop(0.51, #dd7492), color-stop(0.54, #e17f80), color-stop(0.57, #e58b6d), color-stop(0.60, #eb955c), color-stop(0.63, #ef9e4c), color-stop(0.66, #eca348), color-stop(0.69, #e7a547), color-stop(0.72, #e3a946), color-stop(0.75, #dfab46), color-stop(0.78, #daae45), color-stop(0.81, #d6b244), color-stop(0.84, #d2b442), color-stop(0.87, #cdb841), color-stop(0.90, #c7bb41), color-stop(0.93, #c3be40), color-stop(0.96, #bfc241), color-stop(1, #bcc33e)); 
    background-image: gradient(linear, left top, right top, color-stop(0, #4d2dac), color-stop(0.03, #542ea8), color-stop(0.06, #5b2fa0), color-stop(0.09, #64319a), color-stop(0.12, #6d3193), color-stop(0.15, #75338c), color-stop(0.18, #7f3486), color-stop(0.21, #8b357e), color-stop(0.24, #933776), color-stop(0.27, #9f386e), color-stop(0.30, #ab3a65), color-stop(0.33, #b63e61), color-stop(0.36, #bd476a), color-stop(0.39, #c25074), color-stop(0.42, #c8587c), color-stop(0.45, #d06287), color-stop(0.48, #d86b92), color-stop(0.51, #dd7492), color-stop(0.54, #e17f80), color-stop(0.57, #e58b6d), color-stop(0.60, #eb955c), color-stop(0.63, #ef9e4c), color-stop(0.66, #eca348), color-stop(0.69, #e7a547), color-stop(0.72, #e3a946), color-stop(0.75, #dfab46), color-stop(0.78, #daae45), color-stop(0.81, #d6b244), color-stop(0.84, #d2b442), color-stop(0.87, #cdb841), color-stop(0.90, #c7bb41), color-stop(0.93, #c3be40), color-stop(0.96, #bfc241), color-stop(1, #bcc33e)); 
    color:transparent; 
    -webkit-background-clip: text; 
    background-clip: text; 
} 

它的工作原理下的Safari，Chrome和我認爲IE瀏覽器下，但它並不在FF工作。 如果你在FF下運行jsfiddle，你會看到一個空白的html結果，但是文本存在，只有不可見。

在Android下它不起作用，但有一個不同的問題（長漸變框）。

如果有一個jquery/angularjs插件在使用漸變不適用時使用svg，我可以使用它。

而且我有一張圖片可以用於漸變背景。

任何幫助，歡迎。

Answer 1

我沒有修復整個事情，但-moz漸變的語法有點不同。應該更像是：

background-image: -moz-linear-gradient(left, #4d2dac 0, #542ea8 25%, #5b2fa0 50%); 

...等等。