使用圖像的文本漸變

Question

這是如何使梯度文本只爲WebKit，我發現它從HERE！

h1 { 
    font-size: 72px; 
    background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    } 

有什麼辦法通過使用x重複的梯度圖像來使文本的顏色漸變？

Answer 1

是的，你可以使用一個梯度圖像做，只是覆蓋上的文字圖像

Demo

<div class="gradient1"> 
    <h1><span></span>CSS Gradient Text</h1> 
</div> 

.gradient1 h1 { 
    font: bold 330%/100% "Lucida Grande", Arial, sans-serif; 
    position: relative; 
    margin: 30px 0 50px; 
    color: #464646; 
} 
.gradient1 h1 span { 
    background: url(http://i.stack.imgur.com/nrgB0.png) repeat-x; 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 31px; 
} 

Credits

編輯：如果你有興趣在僅使用CSS的解決方案，我認爲這將支持大多數瀏覽器

Demo

<span>Isn't this awesome?</span> 

span { 
    position:relative; 
    font-size: 30px;  
} 

span:after { 
    content: ""; 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
} 

Answer 2

遵循以下兩個環節：

首先是創建CSS漸變在線 http://www.colorzilla.com/gradient-editor/

第二個工具是MS工具，來創建數據甕SVG梯度IE9使用+ ​​

結合這兩個（最好與modernizr.com），你可能有你想要的東西（取決於梯度是多麼複雜）