可以在文本颜色上设置渐变吗？

Question

Firefox 3.6允许设置gradient on backgrounds。

是否可以在文本颜色上设置渐变？

For example：

HTML：

<span>Hello</span>

CSS：

body {
    background: -moz-linear-gradient(left, red, white);
}
span {
    font-size: 13em;
    color: #222;
}

我想用#222替换-moz-linear-gradient(left, white, blue);，例如。

有没有办法做到这一点？

Answer 1

如果您只需要少量文字（如标题），那么您应该可以使用-webkit-background-clip: text和-webkit-gradient在Safari / Chrome中实现效果。 （Firefox目前还不支持。）

This demo doesn’t use gradients, but it should explain background-clip: text

Answer 2

h1 { position: relative; font-size: 70pt; margin-top: 0; }

h1 a {
    text-decoration: none;
    color: #ffcc33; /* or rgb/a */
    position: absolute;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
//css to enter the content on page after render - optional
h1:after {
    content : 'Hello World';
    color: #d6d6d6;
    text-shadow: 0 1px 0 white;
}

h1 a { text-decoration: none; color: #ffcc33; /* or rgb/a */ position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); } //css to enter the content on page after render - optional h1:after { content : 'Hello World'; color: #d6d6d6; text-shadow: 0 1px 0 white; }