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

效果：

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/lingXie/p/11477577.html