先上代码
background-image: linear-gradient(to bottom,#00efff,#00b3ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
文字渐变
1、第一步,先将背景做一个渐变。
background-image:linear-gradient(…) 或者
background-image:radial-gradient(…)
2、第二步,将背景上文字占据的的地方显示出来,文字不占的地方剪切掉,这样就看不到文字之外的背景了。
-webkit-background-clip: text;
3、第三步就是让文字的颜色变成透明的,这样就把文字下的背景色显示出来了。
之前背景色是渐变的,所以最后看到的文字就是渐变的。
其实是借助了背景的渐变色,文字自己的颜色透明了。