跨浏览器CSS 3文本渐变

Question

在我的网站上，我正在使用文字渐变标题，但它只适用于Chrome和Safari（虽然我还没有测试过），下面是我用于渐变的代码。我想知道是否有办法达到可以在所有3种浏览器中使用的相同/类似效果？

      background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

编辑：已发布的其他解决方案的问题在于它只适用于白色背景，正如有人在评论中说的那样，这对我来说没什么用，因为我正在使用灰色背景。

Answer 1

如果您希望在非WebKit浏览器中使用此功能，则需要使用CSS以外的解决方案。

有一些JavaScript解决方案，或者您可以使用SVG。

这是一篇关于如何做的好文章：http://lea.verou.me/2012/05/text-masking-the-standards-way/

使用JavaScript有使用JavaScript的缺点，但在一天结束时，这只是一种装饰性的视觉效果。

Answer 2

-moz-background-clip：文本在firefox上不起作用，你将无法在Firefox中实现剪辑效果。

您可以将cufon用于文本渐变，并且可以在IE，Chrome和Firefox上使用