跨浏览器CSS 3文本渐变 [英] Cross browser CSS 3 text gradient

问题描述

在我的网站上，我使用文本渐变的标题，但它只适用于Chrome和可能的Safari（虽然我没有测试它），下面是我用于渐变的代码。我想知道是否有办法实现相同/类似的效果，将工作在所有3个浏览器？

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?

      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.

推荐答案

如果你想要在非WebKit浏览器中工作，你需要使用CSS以外的解决方案。

If you want this to work in non-WebKit browsers, you need to use a solution other than CSS.

有一些JavaScript解决方案，你可以使用SVG。

There are some JavaScript solutions out there, or you can use SVG.

这是一个很好的博客文章如何做： http://lea.verou.me/2012/05/text-masking-the-standards-way/

Here's a good blog post on how to do it: http://lea.verou.me/2012/05/text-masking-the-standards-way/

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

Using JavaScript has the downside of... using JavaScript, but at the end of the day this is only a decorative visual effect.

这篇关于跨浏览器CSS 3文本渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！