有没有一种简单的方法来设置带有渐变的文本样式？答案

【问题标题】：Is there a simple way to style text with gradients?有没有一种简单的方法来设置带有渐变的文本样式？
【发布时间】：2010-11-30 09:50:19
【问题描述】：

可以使用以下渐变设置背景样式： background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));

有没有办法用渐变设置文本样式？我一直在寻找类似的东西： color-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));but 找不到任何简单的东西。

感谢您的帮助。

【问题讨论】：

标签： colors css gradient

【解决方案1】：

这是可能的。您只需将背景图像与背景剪辑结合起来：文本：请参阅this most excellent example 此处。

background: url(/bgclip/img/paint.png) repeat, white;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

【讨论】：

当然，但它的 webkit 只有 atm。

【解决方案2】：

除非您使用图像来覆盖字体，否则纯 CSS 是不可能的： http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/ 您可以使用相同的技术，但在叠加元素中使用颜色到透明渐变。

这是一个纯 CSS 和一个附加元素的示例：http://jsfiddle.net/Lub7z/

【讨论】：

这是我害怕的答案 :-) 我会尽快将其标记为已回答。