青岛网站建设新闻资讯

用css实现文字字体颜色渐变的三种方法

时间:2024-01-03 已阅读:868次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

用css实现文字字体颜色渐变的三种方法分享。

第一种:

/*实现文字颜色从红到黄的线性渐变效果*/
.gradient-text {
  background: linear-gradient(to right, #ff0000, #ffff00); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
  -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
  -webkit-text-fill-color: transparent;/*给文字设置成透明*/
}

第二种:SVG图像实现text-fill-color(兼容性不好,不推荐)

/*利用SVG图像实现文字颜色从蓝到白的渐变效果*/
.gradient-color {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><linearGradient id="Gradient"><stop offset="0%" stop-color="blue"/><stop offset="100%" stop-color="white"/></linearGradient><mask id="Mask"><text x="0" y="50%" dy=".35em">Gradients are awesome!</text></mask><rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient)" mask="url(#Mask)"/></svg>');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

第三种:

/*利用background-clip属性实现文字颜色从绿到白的渐变效果*/
.gradient-color {
  background-image: linear-gradient(to right, green, white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

background-clip是CSS3中新增的属性,可以用于指定背景图片或颜色的绘制范围。

以上三种方法都可以实现文字的颜色渐变,你学会了吗。


二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1439.html

相关资讯

Copyright © 2011-2024 青华互联-青岛青华锐思网络科技有限公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图