文字使用css渐变字体颜色

want、

于 2019-11-25 17:05:01 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏：工作中的一点记录

本文链接：https://blog.youkuaiyun.com/javaScript_want/article/details/103241528

工作中的一点记录专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种利用CSS的background-image属性结合linear-gradient和-webkit-background-clip属性实现的渐变背景文本效果。通过设置特定的角度和颜色，可以创建从橙色到黄色的渐变，并使用-webkit-text-fill-color属性使文本透明，从而让背景渐变透过文字显示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法：

 background-image: linear-gradient(
              0deg,
              rgba(255, 171, 0, 1) 7.5439453125%,
              rgba(255, 250, 142, 1) 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;