首页 > Web开发 > 详细

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

时间:2019-09-06 19:10:53      阅读:112      评论:0      收藏:0      [点我收藏+]

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

效果:

技术分享图片

 

 

 

 

 

 

 



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

原文:https://www.cnblogs.com/lingXie/p/11477577.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!