bakcground-clip:text属性，设置文字背景

　　项目中遇到的文字内部颜色渐变，或者文字的背景是图片类型的，这种设计看上去很是舒服，于是动手测试了一下。

　　首先需要了解的是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的内容如下：

      <div class="bg">
        内容（clip）
      </div>    

　　　css的代码：

.bd{
    height: 50px;
    line-height: 50px;
    color: red;
    text-align: center;
    font-size: 100px;
    background: linear-gradient(45deg,#c751fe, #ff51a3,#f5f7f8);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

　　以上内容到此结束。