css实现彩色文本或纹理文本

background-clip: text;目前只有Chrome支持，所以通常使用-webkit-background-clip: text;

 

-webkit-background-clip: text;的含义什么？

　　以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉

　　简言之：文本区即背景区，文本以外的都被裁剪

 

具体案例：

<h1>hello,world</h1>

 

1.实现文本纹理

h1{
   font-size: 30px;
   background: url(img/bg.jpg) no-repeat center/100% 100%;
   -webkit-background-clip: text;
　　color: transparent;
}

效果：

2.实现彩虹文本

h1{
     font-size: 30px;
     background: linear-gradient(to right, red, blue);
     -webkit-background-clip: text;
     color: transparent;
}

效果：