Css 文本的彩虹色 .rainbowtext{背景图片：-webkit渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22））； 背景图像：渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22））； 颜色：透明； -webkit背景剪辑：文本； 背景剪辑：文本； 字体大小：粗体；} 您好！这应该是彩虹色的

我想做一个有彩虹色彩的文本。这段代码很好用，但只适用于Safari/Chrome，在firefox中，文本是透明的。我试过胡闹，但没有成功。有什么帮助吗：P？

Edit2 使用SVG在上找到了一个解决方案，该解决方案使用彩虹渐变绘制200x200图案，然后作为填充应用于文本

你好这有彩虹的颜色。

您的问题不清楚。请添加更多详细信息和完整的代码示例。谢谢。也试过添加

-moz gradient

？@j08691这怎么不清楚？他想要一个彩虹效果，包括一个只适用于Webkit浏览器的代码片段，他希望这也适用于Firefox。@user1129884-如果你看到文章的编辑历史，你会注意到OP添加了我要求的详细信息。TL；博士，你不能<代码>-webkit背景剪辑：文本是webkit特有的功能。它不是标准属性/值。根据，可接受的

背景剪辑

值为

边框框

、

填充框

和

内容框

。是的，这不是绝对正确的语法，因为参数很少，这就是我包含docsYea的原因。。因为它只会将背景显示为渐变。没有文本clipping@ProstSunt据我所知，

背景剪辑：属性不支持值
text
。在firefox中，这种方法不可能做到这一点。
当你询问渐变字母时，我的答案是渐变背景。
因此，这个问题的答案完全没有意义。此外，在FF的任何版本中都没有这样的
-moz gradient
属性。@HashemQolami，RickHitchcock在那里修复了它c:
.rainbowtext{ 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;
font-weight: bold; }
<p class="rainbowtext">Hello! This should have rainbow coloring.</p>