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

Question

可以使用渐变设置背景的样式，如：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));这样的东西，但找不到任何简单的东西。

谢谢你的帮助。

Answer 1

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

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

Answer 2

这是可能的。您只需将背景图像与背景剪辑:文本:在此处查看this most excellent example。

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