实现思路:
- 盒子设置为
inline-block
,这样盒子的大小就由文本量决定; - 盒子背景图片使用
linear-gradient
设置渐变色; - 设置
background-clip: text;
使用文字区域截取背景; - 此时文字覆盖在背景上方,只能看到原本纯色的文字,设置文本颜色为透明:
color:transparent;
,就能看到底部的渐变色的文字。
参考代码:
.gradient-font{
font-size: 3.5rem;
text-transform: uppercase;
font-weight: 700;
display: inline-block;
background-image: linear-gradient(to right, #7ed56f, #28b485);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.2rem;
}
标签:clip,gradient,渐变色,字体,background,text,font,CSS From: https://www.cnblogs.com/feixianxing/p/18011932/css-font-color-linear-gradient-background-c这种方法适用于 iconfont。