可以在文本顏色上設置漸變嗎？

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

我想與-moz-linear-gradient(left, white, blue); 「替換」 #222，例如。

有沒有辦法做到這一點？

Answer 1

如果你只需要這個文本（如標題）的量小，你應該能夠實現使用-webkit-background-clip: text和-webkit-gradient Safari /鉻的效果。 （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; 
}