Html 如何在 CSS 中使用渐变作为字体颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20882162/
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
How do I use a gradient as a font color in CSS?
提问by Piyush Marvaniya
How do I use a gradient as a font color in CSS, without using images? I want to support Firefox.
如何在不使用图像的情况下在 CSS 中使用渐变作为字体颜色？我想支持火狐浏览器。
I have used this code but it's not supported in Firefox:
我已经使用了此代码，但 Firefox 不支持它：
<div class="text1"> Gradient Text</div>
.text1
{
font-size: 40px;
background: -webkit-linear-gradient(#0F3, #F00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
回答by cytofu
you can use multiple spans that are positioned on top of each other and assign a different height and color to each of them. Its really ugly coding wise, but it works. http://jsfiddle.net/7yBNv/
您可以使用位于彼此之上的多个跨度，并为每个跨度分配不同的高度和颜色。它的编码真的很丑，但它有效。 http://jsfiddle.net/7yBNv/
Text selection is behaving a bit funky, but not too bad. And copying copies several entries (depending on which layer is selected) So I'd say you are better of solving this with svg's.
文本选择的表现有点时髦，但还不错。复制会复制几个条目（取决于选择的图层）所以我想说你最好用 svg 来解决这个问题。
(I got the answer from here ,check there for more details: http://www.bagnall.co.uk/gradient_text.asp)
（我从这里得到答案，查看更多详细信息：http: //www.bagnall.co.uk/gradient_text.asp）
html:
html：
<h1 class="Gradient">Sample Gradient Text (h1)
<span class="G1" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G2" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G3" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G4" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G5" aria-hidden="true">Sample Gradient Text (h1)</span>
</h1>
css:
css：
.Gradient{
position: relative;
overflow: hidden;
height: 28px;
}
.Gradient,
.Gradient .G1,
.Gradient .G2,
.Gradient .G3,
.Gradient .G4,
.Gradient .G5{
height: 28px;
position: absolute;
margin: 0;
top: 0px;
left: 0px;
color: #4a778b;
font-family: century gothic,helvetica,arial;
font-size: 23px;
font-weight: normal;
overflow: hidden;
}
.Gradient{
position: relative;
}
.Gradient .G5{
height: 10px;
color: #81a4b4;
z-index: 6;
}
.Gradient .G4{
height: 13px;
color: #789eae;
z-index: 5;
}
.Gradient .G3{
height: 16px;
color: #6f96a6;
z-index: 4;
}
.Gradient .G2{
height: 19px;
color: #618a9c;
z-index: 3;
}
.Gradient .G1{
height: 22px;
color: #547f92;
z-index: 2;
}
回答by Samuel Ondrek
Firefox Support:
Unfortunately, only WebKit browsers implemented text-fill-color.
There is no workaround for Mozilla yet.
Firefox 支持：
不幸的是，只有 WebKit 浏览器实现了 text-fill-color。
目前还没有适用于 Mozilla 的解决方法。
Awesome post to this by Lea Verou:
http://lea.verou.me/2012/05/text-masking-the-standards-way/
Lea Verou 的精彩帖子：http ://lea.verou.me/2012/05/text-masking-the-standards-way/
Demo for WebKit:
http://jsfiddle.net/ondrek/trr67/
WebKit 演示：http :
//jsfiddle.net/ondrek/trr67/
Code of HTML and CSS:
HTML和CSS代码：
<h1>hello</h1>
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
How to generate own gradient:
You can also generate own gradient at
http://www.colorzilla.com/gradient-editor/
如何生成自己的渐变：
您也可以在http://www.colorzilla.com/gradient-editor/生成自己的渐变
Duplicate to a question on:
CSS3 Gradient not working in Firefox
回答by Amir Ahmad
.text1
{
font-size: 40px;
background: -webkit-linear-gradient(#0F3, #F00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: -moz-linear-gradient(#0F3, #F00);
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
you have to specify vendor prefix for firefox
您必须为 Firefox 指定供应商前缀
回答by Francesc
You can use this generatortextgradient.comto do CSS gradient texts.
你可以使用这个生成器textgradient.com来做 CSS 渐变文本。
