通过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%); 

...等等。