相册:【教程】如何在HPOI相册中使用渐变色文字 by 南极洲舰长

原创【教程】如何在HPOI相册中使用渐变色文字

1274

更新时间：2022-07-16 22:07

渐变色测试文字

注意，本教程目前只适用于电脑端

①.进入专业模式的代码视图

②.选择你要使用渐变色的文字，在文字代码的标签下，加入如下代码

style="
background:linear-gradient(to right,#f0610e,#e8771a,#fff34a);
-webkit-background-clip:text;
color:transparent;

第一个样式是为目标添加渐变背景色，to right是方向，可以修改为to left、to bottom(底部)、to top，继续延伸可以使用 to bottom right(向右下)等等，#f0610e是第一个颜色(最左侧)，#e8771a是第二个颜色(中部)，#fff34a是第三个颜色(结尾)，颜色代码可以使用rgb代码，也可使用带#的十六进制颜色，或者干脆使用 red blue之类直接代表简单颜色的单词

第二个样式color: transparent，设置原字体颜色为透明

第三个样式-webkit-background-clip: text，文本渐变

部分灵感来源：CSDN地址