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

效果：

技术分享图片

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

踩

(0)

评论一句话评论（0）

分享档案

更多>