PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

css怎么让文本域中字用不同颜色

原创2022-09-02 18:19:411090 + Vue前端学习QQ群(点击入群)

实现步骤:1、使用linear-gradient()给文本域添加渐变背景效果,语法“background-image: linear-gradient(...);”;2、使用background-clip属性和color属性让渐变背景色只在文本域的文字上显示,即让文字渐变有不同颜色,语法“background-clip: text;color: transparent;”。

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,可以通过给文本域中文字添加渐变效果实现文字不同颜色。

css3文字渐变色:linear-gradient()+background-clip

CSS 中并没有直接的属性来设置文字渐变,通常文字只能是纯色。不过可以通过背景裁剪 background-clip让背景色在文本区域显示出来,看着就像是文字有了渐变

效果图

1.png

代码




    
    



	   

登录后复制

代码不多,我们来解析一下:

background-image: linear-gradient(to right, red, blue);是背景图 取值为渐变色。

2.png

渐变效果是作用在背景上的,怎么让该效果作用在文字上?这就使用到background-clip 属性。因为它是一个新属性,有兼容问题,因此要加前缀

background-clip: text;
-webkit-background-clip: text;
登录后复制

background-clip 属性 规定背景的绘制区域

语法:background-clip: border-box|padding-box|content-box;

上面没有说取值 text 的情况,看到前面的前缀,大家应该也能想到,它的兼容性问题了,目前还不是能所有浏览器都支持。

取值为text的意思,就是以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。

3.png

可以看到,有一点点的渐变,但不明显;这是因为文字本身也有颜色,有颜色的文字会覆盖在背景之上。所以,我们最后写color: transparent; 让文字为透明色,就是让后面背景色显示出来。

4.png

(学习视频分享:web前端

以上就是css怎么让文本域中字用不同颜色的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

程序员必备接口测试调试工具:点击使用

Apipost = Postman + Swagger + Mock + Jmeter

Api设计、调试、文档、自动化测试工具

后端、前端、测试,同时在线协作,内容实时同步

支持grpc,http,websocket,socketio,socketjs类型接口调试

相关文章

相关视频


视频教程分类

专题推荐

官方公众号

php中文网课程

扫码关注官方公众号
回复“phpcn01”领取php学习资料课程
全套工具、电子书、脑图、内部课程等

推荐视频教程

开通VIP会员课 0元学

热门推荐