Html 跨浏览器 CSS 3 文本渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18403028/
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
Cross browser CSS 3 text gradient
提问by Harry12345
On my website, I'm using a text gradient for the heading, but it only works on Chrome and probably Safari (although I haven't tested it), below is the code I'm using for the gradient. I was wondering whether there was a way to achieve the same/similar effect that would work across all 3 browsers?
在我的网站上，我为标题使用了文本渐变，但它仅适用于 Chrome 和 Safari（虽然我还没有测试过），下面是我用于渐变的代码。我想知道是否有一种方法可以实现在所有 3 个浏览器上都可以使用的相同/相似的效果？
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
EDIT:The problem with the other solution that's been posted is that it only works on a white background, as someone said in the comments, which is no good for me as I'm using a grey background.
编辑：已发布的另一个解决方案的问题是它仅适用于白色背景，正如有人在评论中所说，这对我来说没有好处，因为我使用的是灰色背景。
采纳答案by thirtydot
If you want this to work in non-WebKit browsers, you need to use a solution other than CSS.
如果您希望它在非 WebKit 浏览器中工作，则需要使用 CSS 以外的解决方案。
There are some JavaScript solutions out there, or you can use SVG.
有一些 JavaScript 解决方案，或者您可以使用 SVG。
Here's a good blog post on how to do it: http://lea.verou.me/2012/05/text-masking-the-standards-way/
这是一篇关于如何做到这一点的好博客文章：http: //lea.verou.me/2012/05/text-masking-the-standards-way/
Using JavaScript has the downside of... using JavaScript, but at the end of the day this is only a decorative visual effect.
使用 JavaScript 有......使用 JavaScript 的缺点，但归根结底，这只是一种装饰性的视觉效果。
回答by psd2htmldepot
-moz-background-clip:text does not work on firefox, and you won't be able to achieve clipping effect in Firefox.
-moz-background-clip:text 在firefox 下不起作用，在Firefox 下也无法实现剪辑效果。
You can use cufonfor the text gradients, and thay will work on IE, Chrome and Firefox
您可以将cufon用于文本渐变，并且可以在 IE、Chrome 和 Firefox 上使用
