CSS 纯 CSS3 文本颜色渐变 - 有可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4740033/
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
Pure CSS3 text color gradient - Is it possible?
提问by Kriem
Is there a way to create a cross-browser, pure CSS3 text color gradient?
有没有办法创建跨浏览器的纯 CSS3 文本颜色渐变？
So, no png's. No 'webkit' only.
所以，没有png。没有“webkit”而已。
EDIT:To be more precise: It's CSS3 only, and it's for text, not box gradients.
编辑：更准确地说：它只是 CSS3，它用于文本，而不是框渐变。
EDIT:I found this solution, but it's only for webkit.
编辑：我找到了这个解决方案，但它仅适用于 webkit。
采纳答案by Michael Mullany
There is no cross-browser way to do this outside webkit because only webkit currently has a background-clip: text, and this extension to background-clipis not on standards track (as far as I am aware). If you want to relax your CSS3 requirement, you can accomplish the same effect cross-browser with Canvas (or SVG), but then you're talking about HTML5-capable browsers only.
在 webkit 之外没有跨浏览器的方式来做到这一点，因为目前只有 webkit 有一个background-clip: text，并且这个 background-clip 的扩展不在标准轨道上（据我所知）。如果您想放宽您的 CSS3 要求，您可以使用 Canvas（或 SVG）实现相同的跨浏览器效果，但您只是在谈论支持 HTML5 的浏览器。
回答by Gus T Butt
There is no "pure" CSS way at the moment, but there is a way using CSS and some duplication of content. See my server side css gradient text solution here, which doesn't require JavaScript or plain background. You can also do this client side using JavaScript, see what Dragonlabs has done here.
目前没有“纯”CSS 方式，但有一种使用 CSS 和一些重复内容的方式。在此处查看我的服务器端 css 渐变文本解决方案，它不需要 JavaScript 或纯背景。您也可以使用 JavaScript 来完成这个客户端，看看 Dragonlabs 在这里做了什么。
回答by enyo
As I've already pointed out as a comment in zzzzBov's response, there is a way to achieve a text gradient in CSS3 only.
正如我已经在 zzzzBov 的回复中作为评论指出的那样，有一种方法可以仅在 CSS3 中实现文本渐变。
If you take the PNG solutiona bit further, you can do the same trick with css3 gradients.
如果您进一步使用PNG 解决方案，您可以使用 css3 渐变执行相同的技巧。
Of course this does only work for text that is on a uniform background color.
当然，这仅适用于具有统一背景颜色的文本。
回答by sean2078
Best solution at the moment is to use a solid color as non-webkit fallback and then use the following technique ( requires webkit ):
目前最好的解决方案是使用纯色作为非 webkit 后备，然后使用以下技术（需要 webkit）：
h1 {
color: 3;
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<h1>Example</h1>