Text 利用图像的文本梯度

这是如何使梯度文本只为WebKit，我发现它从

---

有没有办法通过使用x-重复渐变图像来实现文本的颜色渐变？

是的，你可以使用渐变图像来实现，只需将图像覆盖在文本上即可

CSS渐变文本
.梯度1 h1{
字体：粗体330%/100%“Lucida Grande”，Arial，无衬线；
位置：相对位置；
利润率：30像素0 50像素；
颜色：#4646；
}
.坡度1 h1跨度{
背景：url(http://i.stack.imgur.com/nrgB0.png)重复-x；
位置：绝对位置；
显示：块；
宽度：100%；
高度：31px；
}

编辑：如果您对只使用CSS解决方案感兴趣，我认为它将支持大多数浏览器

这不是很棒吗？ 跨度{ 位置：相对位置； 字体大小：30px； } 跨度：之后{ 内容：“； 显示：块； 位置：绝对位置； 排名：0； 左：0； 身高：100%； 宽度：100%； 背景：-moz线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）； 背景：-webkit渐变（线性、左上、左下、颜色停止（0%，rgba（255255,1））、颜色停止（100%，rgba（255255,0））； 背景：-webkit线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）； 背景：-o-线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）； 背景：-ms线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）； 背景：线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）； 过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#00ffffff'，GradientType=0）； }

---

遵循以下两个链接：

第一个是在线创建CSS渐变的工具

第二个是MS工具，用于创建用于IE9的数据梯度+

将两者结合起来（最好使用modernizer.com），你可能会得到你想要的（取决于渐变的复杂程度）

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

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

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