CSS CSS中文本的彩虹渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40557461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rainbow gradient on text in CSS
提问by Eric NEMO
What would be the best way to achieve this design in CSS?
在 CSS 中实现这种设计的最佳方法是什么？
and this:
和这个：
Thanks for your help!
谢谢你的帮助！
回答by Commercial Suicide
Here is how you can create basic rainbow linear gradient (without integration with text yet):
以下是创建基本彩虹线性渐变的方法（尚未与文本集成）：
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}<div id="grad1"></div>Or alternatively, you can use one of the gradient generators (I prefer this one).
或者，您可以使用其中一种梯度生成器（我更喜欢这个）。
And here is the text integration:
这是文本集成：
#grad1 {
background: red;
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20vw;
}<h1 id="grad1">Fake Text</h1>Main parts here are background-clipand text-fill-colorproperties, but be ready, that not all browsers will support it. For more info about browser compatibility check sections with the same names near the bottoms of these pages:
这里的主要部分是background-clip和text-fill-color属性，但请准备好，并非所有浏览器都支持它。有关浏览器兼容性的更多信息，请检查这些页面底部附近具有相同名称的部分：
P.S.Drawing a line is pretty simple, you just need to use a gradient and define some styles to make this block the right form, for example:
PS画一条线很简单，你只需要使用渐变并定义一些样式来使这个块成为正确的形式，例如：
#grad1 {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}
.line {
height: 6px;
border-radius: 4px;
}<div id="grad1" class="line"></div>回答by Terence Hill
If you need that same gradient for the text use something like this.
如果您需要为文本使用相同的渐变，请使用这样的东西。
h1 {
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 60px;
line-height: 60px;
}<h1>100% Unicorn</h1>But text-fill-color isn′t supported in Internet Explorer. So perhaps its better to use transparent png or svg in foreground.
但 Internet Explorer 不支持 text-fill-color。因此，在前景中使用透明 png 或 svg 可能更好。
回答by James
I tend to use this gradient generator. Add colours at different points and use the rotate option.
我倾向于使用这个渐变生成器。在不同点添加颜色并使用旋转选项。
It will generate the CSS for you.
它将为您生成 CSS。
回答by Hai Dinh
In CSS file:
在 CSS 文件中：
.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;
border: 2px dotted white;
-webkit-background-clip: text;
background-clip: text;
}
Result
结果
