跨浏览器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，但归根结底这只是一种装饰性的视觉效果。