跨浏览器的CSS 3文本渐变

Question

在我的网站上，我使用了文本渐变来为标题增添效果，但它只能在Chrome浏览器和可能的Safari浏览器（虽然我没有测试过）上工作。下面是我使用的渐变代码。我想知道是否有一种方法可以在所有三个浏览器上实现相同/类似的效果？

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

编辑：已发布的另一解决方案存在问题，因为正如评论中有人所说，它只适用于白色背景，这对我来说不好，因为我正在使用灰色背景。

- Harry12345

---

跨浏览器文本渐变：纯CSS而不使用背景图像。 - Xareyo

你说的“在所有三个浏览器上”是什么意思？市场上有超过三种常用浏览器。 - Spudley

IE拥有庞大的用户群，你应该关注它。特别是因为它完全能够执行CSS渐变（尤其是IE10及更高版本已经完全支持标准，即使旧版本只需稍加努力也可以实现渐变）。 - Spudley

它之所以拥有庞大的用户群，是因为人们不断地支持它 :) - iConnor

为什么它不能在灰色上工作？ - John Dvorak

Answer 1

如果你希望在非WebKit浏览器中实现此效果，你需要使用除CSS以外的其他解决方案。有一些JavaScript解决方案，或者你可以使用SVG。这是一个很好的博客文章，介绍了如何实现：http://lea.verou.me/2012/05/text-masking-the-standards-way/。使用JavaScript的缺点是...需要使用JavaScript，但归根结底，这只是一种装饰性的视觉效果。

- thirtydot

---

最终的答案是SVG。 - Harry12345

Answer 2

-moz-background-clip:text在Firefox上无法起作用，因此您将无法在Firefox中实现裁剪效果。

您可以使用cufon来创建文本渐变，它们将在IE、Chrome和Firefox上都可用。

- psd2htmldepot

---

这在Firefox 49+中有所改变，现在FF和Edge已经完全支持它，其他浏览器仍需要前缀 https://caniuse.com/#feat=mdn-css_properties_background-clip_text - jave.web