颜色变变变变变变变!公众平台的七彩背景来啦!

 时间:2026-02-19 03:38:37

1、下面为大家揭晓,这种彩色渐变的文字背景色是怎么实现的。

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

颜色变变变变变变变!公众平台的七彩背景来啦!

颜色变变变变变变变!公众平台的七彩背景来啦!

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

<span style="background-image: linear-gradient(90deg, rgb(105, 183, 235), rgb(179, 219, 211), rgb(244, 214, 219));">文字</span>

颜色变变变变变变变!公众平台的七彩背景来啦!

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

颜色变变变变变变变!公众平台的七彩背景来啦!

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

颜色变变变变变变变!公众平台的七彩背景来啦!

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

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

7、除了上面为大家展示的这种渐变颜色,沙师弟还大家准备了下面几种简便的颜色。

颜色变变变变变变变!公众平台的七彩背景来啦!

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

颜色变变变变变变变!公众平台的七彩背景来啦!

9、点击i排版编辑器工具栏上HTML按钮,把以下代码粘贴上。注意一定要有前后的span标签。

<section style="background-image: linear-gradient(#FFAF7B, #D76D77); background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; height: 150px;">

</section>

颜色变变变变变变变!公众平台的七彩背景来啦!

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

11、根据文字的多少,调整代码中height的数值(如图所示),就可以增长背景色长度。

颜色变变变变变变变!公众平台的七彩背景来啦!

12、调整代码中的颜色数值(如图所示),就可以改变渐变卡片的颜色。

颜色变变变变变变变!公众平台的七彩背景来啦!

  • 怎样使用美图秀秀网页版进行拼图处理
  • 百度秀米怎样同步多图文到公众号?
  • 微信公众号怎样开启图片水印
  • 如何共享图文素材到多个公众号?
  • 微信公众账号如何发布消息
  • 热门搜索
    低值易耗品摊销方法 描写人物的方法 怎么样打字速度快 预计净残值怎么算 吊带袜怎么穿 传染性软疣怎么治 家常炖鸡 凉面的家常做法 小叶增生怎么办 新硬盘怎么装系统