CSS不适用于Firefox，但适用于Chrome

以下代码适用于Chrome，但在Firefox中失败。这种风格闪烁成功消息。CSS不适用于Firefox，但适用于Chrome

.rainbow { 
 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); 
 
    background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); 
 
    color: transparent; 
 
    -webkit-background-clip: text; 
 
    background-clip: text; 
 
}

<div class="rainbow">Success</div>

来源

2016-04-15 Gajendiran

只要我知道ff中不支持背景剪辑，则错字使用=类 –

旁边。 –

虽然链接的问题涉及'-moz'前缀版本，答案都是一样的。 'background-clip'是一个标准属性，但值'text'不是。这是一个特定于Webkit的选项，因此在其他浏览器中不起作用。 – Harry

我认为Firefox的支持U需要写这样的事情。

div { 
 
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
 
}

<div>A rainbow made from a gradient</div>

看到here更多

制作渐变色我总是用this tool

来源

2016-04-15 08:02:08

欧普希望使用彩虹文本，而不是文本在彩虹盒..请不要改变moto /问题的目的.. thanx –

更好地利用this工具生成你想要的梯度，因为你的方式使用它它不被mozilla识别。

虽然background-clip: text;将无法在mozilla上工作，因为我不存在。

来源

2016-04-15 08:06:10

好吧，请检查您的代码，然后发布为答案，因为它不工作.. –

@Leothelion你是否尝试过并且没有为你工作？ –

是的，请检查ff，你会看到 –

CSS不适用于Firefox，但适用于Chrome

回答

相关问题