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

Question

有没有一种方法可以创建跨浏览器的纯 CSS3 文字颜色渐变？

所以，不能使用 PNG。不要只适用于'webkit'。

编辑： 更精确地说：它仅使用 CSS3，并且是为文本而不是框渐变。

编辑： 我发现了这个解决方案，但它只适用于 Webkit。

- Kriem

---

很简单，您可以参考这篇文章：http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/ - Jay

跨哪些浏览器？支持CSS3的浏览器吗？ - zzzzBov

很抱歉，它仅限于方框渐变效果。我正在寻找文本渐变效果。 - Kriem

背景是纯色的吗？ - Lea Verou

哎呀，我忘了 PNG 格式不行。那 SVG 怎么样？它被所有支持 CSS3 的浏览器支持，不需要任何图片，并且非常易于访问。 - Lea Verou

以下是一个SVG示例链接：https://dev59.com/qVDTa4cB1Zd3GeqPHTvu#3636303，其中使用了一张图片而不是SVG渐变，但更改应该很容易。 - robertc

Answer 1

除了在webkit中，没有跨浏览器的方式来实现这个效果，因为只有webkit目前支持 background-clip: text，而且background-clip的扩展不在标准轨道上 （据我所知）。如果您想放宽对CSS3的要求，则可以通过Canvas（或SVG）在跨浏览器中实现相同的效果，但那样您只能在HTML5兼容的浏览器中使用。

- Michael Mullany

Answer 2

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

- Gus T Butt

---

非常令人印象深刻和直观。谢谢这个选择。 - Joseph Marikle

抱歉出现了双重评论，但我认为快速添加您的解决方案的变体可能会很有用：http://jsfiddle.net/P8k58/。我使用了一些技巧来使其正常工作，并且为了完成效果，我使用了文本阴影。然而，仅用CSS内容（最好是IE 8+）就可以轻松地创建闪亮效果。 - Joseph Marikle

@JosephMarikle 谢谢。我喜欢你使用的:before和:after。 - Gus T Butt

Answer 3

目前最好的解决方案是使用纯色作为非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>

- sean2078

---

我已经指出它“需要webkit”.. 你有更好的解决方案吗？在FF，Chrome和Safari中都可以使用.. @user2602584可怜的用户 - sean2078

Answer 4

正如我在zzzzBov的回答中已经指出的那样，有一种方法可以仅使用CSS3实现文本渐变。

如果您进一步采用PNG解决方案，则可以使用css3渐变执行相同的技巧。

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

- enyo