当前位置：文江博客话题详情

纯 CSS3 文本颜色渐变 - 可能吗？

发布于 2024-10-13 01:02:07 字数 314 浏览 8 评论 0原文

有没有办法创建跨浏览器的纯CSS3文本颜色渐变？

所以，没有png。只有“webkit”。

编辑：更准确地说：它仅适用于 CSS3，并且适用于文本，而不适用于框渐变。

编辑：我发现这个解决方案，但它仅适用于webkit。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

好倦 2024-10-20 01:02:07

在 webkit 之外没有跨浏览器的方法来执行此操作，因为当前只有 webkit 有 background- Clip：文本，并且这个background-clip扩展不在标准轨道上（就我知道）。如果您想放宽 CSS3 要求，您可以使用 Canvas（或 SVG）实现相同的跨浏览器效果，但您谈论的只是支持 HTML5 的浏览器。

回复收藏 0 原文

や莫失莫忘 2024-10-20 01:02:07

目前还没有“纯”CSS 方式，但有一种使用 CSS 和一些内容重复的方式。请参阅我的服务器端 CSS 渐变文本解决方案，它不需要 JavaScript 或纯背景。
您还可以使用 JavaScript 来完成此客户端操作，请在此处查看 Dragonlabs 所做的事情。

回复收藏 0 原文

七堇年 2024-10-20 01:02:07

正如我已经在 zzzzBov 的回复中作为评论指出的那样，有一种方法可以仅在 CSS3 中实现文本渐变。

如果您进一步采用 PNG 解决方案，您可以执行以下操作： css3 渐变也有同样的技巧。

当然，这仅适用于具有统一背景颜色的文本。

回复收藏 0 原文

稍尽春風 2024-10-20 01:02:07

目前最好的解决方案是使用纯色作为非 webkit 后备，然后使用以下技术（需要 webkit ）：

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Example</h1>

Best solution at the moment is to use a solid color as non-webkit fallback and then use the following technique ( requires webkit ):

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}