项目中遇到的文字内部颜色渐变，或者文字的背景是图片类型的，这种设计看上去很是舒服，于是动手测试了一下。
首先需要了解的是background-clip:[content-box | padding-box | border-box]这是大众浏览器支持的三个属性，其中有一个text的值，是chrome特有的属性，所以使用的是有需要加上前缀-webkit-,由于text的值这在其它的浏览器不生效的情况下，为了兼容， 就需要用到color属性，为字体定义颜色。以便在其它浏览器中查看时不会显示的太过简单。
设置了color之后为了能够在chrome中正常的达到预想的效果，使用text-fill-color属性，此属性表示文字中间的填充颜色，设置此属性之后，color设置的属性将失效。为了达到预想效果，此属性在此设置为透明的背景，并且需要添加前缀，-webkit-text-fill-color:transparent;此时之前设置的color属性将失效。
以上的两个重要的属相介绍完毕，下面的内容比较简单了就，直接使用background:url('image')也可以。当然使用linear-gradient也可以，此时用到的css属性全部介绍完毕，下面直接上代码。
html的内容如下：
1 <div class="bg"> 2 内容（clip） 3 </div>
css的代码：
1 .bd{ 2 height: 50px; 3 line-height: 50px; 4 color: red; 5 text-align: center; 6 font-size: 100px; 7 background: linear-gradient(45deg,#c751fe, #ff51a3,#f5f7f8); 8 background-clip:text; 9 -webkit-background-clip:text; 10 -webkit-text-fill-color:transparent; 11 }
以上内容到此结束。