12

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

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

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

4

2 回答 2

3

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

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

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

使用 JavaScript 的缺点是……使用 JavaScript，但归根结底，这只是一种装饰性的视觉效果。

于 2013-08-23T13:20:04.457 回答
1

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

您可以将cufon用于文本渐变，它适用于 IE、Chrome 和 Firefox

于 2013-08-23T12:44:22.910 回答