渐变文字颜色

Question

是否有生成器或生成 这样 的文本但不必定义 每个 字母的简单方法

所以是这样的：

 .rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

 <span class="rainbow">Rainbow text</span>

但不是用 彩虹 色而是用其他颜色生成（例如白色到灰色/浅蓝色渐变等）我找不到一个简单的解决方案。有什么解决办法吗？

原文由 StabDev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不完全知道 停止 的东西是如何工作的。但我有一个 渐变文本 示例。也许这会帮助你！

_如果需要，您还可以向渐变添加更多颜色，或者只是从 颜色生成器 中选择其他颜色

 .rainbow2 {
  background-image: linear-gradient(to right, #E0F8F7, #585858, #fff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

 <span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

原文由 Angel ofDemons 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这种效果的工作方式非常简单。该元素被赋予一个渐变背景。它从一种颜色变为另一种颜色，具体取决于为其指定的颜色和色标百分比。

例如，在彩虹文本示例中（请注意，我已将渐变转换为标准语法）：

• 渐变从颜色 #f22 开始于 0% （即元素的左边缘）。始终假定第一种颜色从 0% 开始，即使未明确提及百分比。
• 在 0% 到 14.25% 之间，颜色逐渐从 #f22 到 #f2f percenatge 设置为 14.25 因为有七种颜色变化，我们正在寻找相等的分割。
• 在 14.25% （容器大小）处，颜色将完全按照指定的渐变 #f2f 。
• 类似地，颜色会根据颜色停止百分比指定的波段从一种变为另一种。每个频段应该是 14.25% 的一个步骤。

所以，我们最终得到了如下代码片段中的渐变。现在仅此一项就意味着背景适用于整个元素而不仅仅是文本。

 .rainbow {
  background-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22);
  color: transparent;
}

 <span class="rainbow">Rainbow text</span>

因为，渐变只需要应用于文本而不是整个元素，我们需要指示浏览器从文本以外的区域剪裁背景。这是通过设置 background-clip: text 完成的。

（ 请注意， background-clip: text 是一个实验属性，未得到广泛支持。 ）

---

现在如果你想让文本有一个简单的 3 色渐变（也就是说，从红色 - 橙色 - 棕色），我们只需要改变 linear-gradient 规范如下：

• 第一个参数是梯度的方向。如果颜色应在左侧为红色，右侧为棕色，则使用方向 to right 。如果它应该在右边是红色，在左边是棕色，那么给出方向 to left 。
• 下一步是定义渐变的颜色。由于我们的渐变应该从左侧的红色开始，只需指定 red 作为第一种颜色（假定百分比为 0%）。
• 现在，由于我们有两种颜色变化（红色 - 橙色和橙色 - 棕色），因此必须将百分比设置为 100 / 2 以进行等分。如果不需要均分，我们可以根据需要分配百分比。
• 所以在 50% 颜色应该是 orange 然后最终颜色将是 brown 。最终颜色的位置始终假定为 100%。

因此，渐变的规格应如下所示：

 background-image: linear-gradient(to right, red, orange 50%, brown).

如果我们使用上述方法形成渐变并将它们应用于元素，我们可以获得所需的效果。

 .red-orange-brown {
  background-image: linear-gradient(to right, red, orange 50%, brown);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.green-yellowgreen-yellow-gold {
  background-image: linear-gradient(to right, green, yellowgreen 33%, yellow 66%, gold);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

 <span class="red-orange-brown">Red to Orange to Brown</span>

<br>

<span class="green-yellowgreen-yellow-gold">Green to Yellow-green to Yellow to Gold</span>

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议