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

Question

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

任何人都可以解释一下如何做到这一点吗？

Answer 1

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

Answer 2

您可以使用 background-clip 'cut out' 背景中的文本（注意某些浏览器需要 -webkit- 前缀），文本 'filled' 是透明的。

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

.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%);
}

<div class="multiColor">HELLO</div>

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

how to add multiple colors in background with linear gradient?

css

text

linear-gradients