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

【问题标题】：Is that possible to set gradient on text color?是否可以在文本颜色上设置渐变？
【发布时间】：2011-03-14 15:26:51
【问题描述】：

Firefox 3.6 允许设置gradient on backgrounds。

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

HTML：

<span>Hello</span>

CSS：

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

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

有什么办法吗？

【问题讨论】：

为什么不试试看它是否有效？
相信我，在我写这个问题之前我已经试过了......

标签： html colors css gradient firefox3.6

【解决方案1】：

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;
}

【讨论】：

我试图将您的代码放在我上面的示例中，但它不起作用。您能否发布一个工作示例？
这不会使文本渐变。

【解决方案2】：

如果您只需要少量文本（如标题），您应该可以在 Safari/Chrome 中使用 -webkit-background-clip: text 和 -webkit-gradient 实现效果。（Firefox 尚不支持此功能。）

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

【讨论】：