如何使用线性渐变在背景中添加多种颜色？答案

【问题标题】：how to add multiple colors in background with linear gradient?如何使用线性渐变在背景中添加多种颜色？
【发布时间】：2021-11-24 03:32:33
【问题描述】：

我正面临一个渐变色问题。我想为文本背景添加渐变，但我不知道如何添加多种颜色。

谁能解释一下如何做到这一点？

【问题讨论】：

您想要背景为多色还是文本字符为多色？

标签： css text linear-gradients

【解决方案1】：

您可以使用 background-clip（注意某些浏览器需要 -webkit- 前缀）从背景中“剪切”文本，并且文本“填充”是透明的。

多色背景可以提供线性渐变，可以有多种颜色，从一侧到另一侧或从上到下。

.multiColor {
  font-size: 3em;
  background-image: linear-gradient(to right, magenta, cyan, lime, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  /* position in center just for this demo */
  position: relative;
  display: inline-block;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

&lt;div class="multiColor"&gt;HELLO&lt;/div&gt;

【讨论】：

是的，这就是我想知道的，我怎么能这样。谢谢您的回答。其实不知道为什么另外两个开发者投了反对票，所以我期待早点回答。

【解决方案2】：

h1{  
  font-size: 64px;
  background-image: linear-gradient(to right, #ba81cf, #6886d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

【讨论】：

谢谢你的回答有没有办法像我用4种颜色那样使用多种颜色。