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

效果:

 

 

 

 

 

 

 



posted @ 2019-09-06 19:00  邪儿莫  阅读(479)  评论(0编辑  收藏  举报