颜色变变变变变变变！七彩背景来啦！

在介绍维密排版的推送中，沙师弟向大家展示了一种渐变背景色的排版，如下图：

今天就为大家揭晓，这种彩色渐变的文字背景色是怎么实现的。

❶ 在编辑框内输入你想改变背景色的文字，点击工具栏上最后一个HTML按钮，进入代码编辑页面。

❷ 然后把这段代码加在p标签之间，代码中的[文字]表示你刚才输入的文字，注意一定要有前后的span标签。

文字

❸ 点击HTML按钮，回到编辑框界面，就可以看到文字的背景颜色发生了变化。

❹ 在已经改变文字背景颜色的基础上，还可以进行其他的变化，比如文字的位置、字体大小、颜色，通过编辑器上的工具栏可以直接调整。

调整代码中rgb的数值，就可以调整渐变样式的颜色。随着文字的增多，背景色会逐渐变长，不需要反复调整。

这样的文字适合用于 标题 ，以及 需要强调的文字 。会给读者造成眼前一亮的感觉，既美观又有趣。

除了上面为大家展示的这种渐变颜色，沙师弟还大家准备了下面几种简便的颜色，你可以把这一篇图文导入i排版草稿箱，替换使用。

iPaiban.com

iPaiban.com

iPaiban.com

iPaiban.com

iPaiban.com

图文导入在手机上就可以完成。

1.点击右上角三个点，点击【复制链接】；
2.打开【小黄人科技】服务号，点击下方菜单个人中心-上传图文；
3.粘贴链接，收到成功的提示表示已经保存。

☜ 滑动查看详细操作步骤

成功上传的图文，保存在登录i排版（iPaiban.com）账号的 草稿箱 里，在 网页端 i排版（ipaiban.com）草稿箱打开就可以继续编辑。

不仅文字背景可以变色，你还可以设置一整个七彩渐变的卡片。比如下面的例子，也可以通过修改代码实现。

iPaiban.com

❶ 点 击i排版（iPaiban.com）编辑器工具栏上HTML按钮，把以下代码粘贴上。 注意 一定要有前后的span标签。

❷ 此时背景已经添加好了，点击HTML按钮，回到编辑器页面，再添加文字就可以了。

❸ 根据文字的多少，调整代码中height的数值 （如图所示） ，就可以增长背景色长度。

调整代码中的颜色数值 （如下图所示） ，就可以改变渐变卡片的颜色。

如果你还想尝试其他渐变背景色，沙师弟为你推荐两个非常好用的渐变色网站。

❶ webgradients.com

Web Gradients 是一个设计师们经常需要用到的UI背景渐变颜色组合，可轻松复制颜色代码到CSS里，同时还支持PSD和PNG版本。

❷ uigradients.com

uiradients 不仅可以点击页面左右侧的箭头，更换渐变色，还可以选择也包含某种特定颜色的渐变色。

这两个网站的渐变色要怎么使用在代码中呢？

沙师弟以第二个 uiradients网站为例。

❶ 点击复制网页中渐变色顶端的色号。

❷ 在i排版（iPaiban.com）编辑器中HTML界面，刚刚添加的代码中，找到如下图画出的rgb的部分。

❸ 把rgb的部分替换成复制网页的颜色代码即可。颜色格式是rgb或者#都可以。

需要几种颜色的渐变，就替换几种颜色，但是要注意每个颜色代码之间，要加上逗号。

本期话题

把你制作的花样渐变文字微信发送给沙师弟（Playhudong003），表现优秀的小伙伴可以获得高级会员哦！

· 往期精华 ·