通过css在文本上的渐变效果不适用于FF
通过css在文本上的渐变效果不适用于FF
提问于 2014-10-18 04:48:56
我有一个问题与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，我可以使用它。
我有一张可以用来做渐变背景的图片。
欢迎任何帮助。
回答 1
Stack Overflow用户
发布于 2014-10-18 05:09:09
我没有解决所有的问题，但是-moz渐变的语法有点不同。应该更像这样：
background-image: -moz-linear-gradient(left, #4d2dac 0, #542ea8 25%, #5b2fa0 50%);...etc。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26433235
复制相关文章
相似问题
腾讯云开发者
