如何为WordPress设置渐变色字体?2步搞定

WordPress设置渐变色字体
通过简单的CSS代码即可为WordPress设置渐变色字体,无需安装多余的插件。
文章目录

本篇文章共 879 字,预计阅读时间 4 分钟

添加字体渐变色CSS样式到主题

WP后台 – 外观 – 自定义,进入到主题的自定义设置界面。

进入主题额外CSS

点击进入“额外CSS”。

添加文字渐变CSS代码

粘贴下方CSS代码:

				
					.gradient{
	background: linear-gradient(to right, #ff6b6b, #4DA1F4); /* 从左到右的渐变 */
	-webkit-background-clip: text; /* 只对文本应用背景 */
	color: transparent; /* 使文本颜色透明,背景渐变色显示出来 */
    font-weight: bold;
}
				
			

可以通过修改:background: linear-gradient(to right, #ff6b6b, #4DA1F4); 这行代码,调整文字渐变的效果。

  • “to right”是渐变的方向
  • 还可以通过度数调整渐变的角度“45deg”
  • “to right”后面的参数是渐变颜色,可以填写多个颜色
  • 颜色可以是“#ffffff这样的色号,或者是“red这样的单词形式

添加CSS代码后记得保存。

WordPress设置渐变色字体

打开文章或者页面的编辑页面。

Elementor文本元素的高级设置界面

给文本元素添加类名

给想要添加渐变效果的文本元素添加类名“gradient”。

这个类名和我们添加css代码时的类名一致。

文字渐变色效果预览:

文字渐变效果1

background: linear-gradient(to right, #ff6b6b, #4DA1F4);

向右渐变,两个渐变色。

文字渐变效果2

background: linear-gradient(to right, purple, #ff6b6b, #4DA1F4, red);

向右渐变,四个渐变色。

文字渐变效果3

background: linear-gradient(to top, purple, #ff6b6b, #4DA1F4, red);

向上渐变。

渐变色文字效果

越大的字体,渐变效果会更明显。

至此,为WordPress设置字体渐变教程结束。

还推荐你看:自定义WordPress后台登录页面样式 

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
B2B外贸建站服务 - well建站
Well提供外贸建站服务,高性价比、不玩套路、终身售后。
文章标签
文章推荐
文章目录
相关文章