从 CSS 渐变中选择颜色来为文本着色答案

【问题标题】：pick color from css gradient for coloring text从 CSS 渐变中选择颜色来为文本着色
【发布时间】：2021-03-13 02:58:08
【问题描述】：

我在 css 中创建了一个颜色渐变。目前文本是黑色的，但我想根据渐变中的匹配颜色为刻度着色。

当然我可以手动输入，但我怎样才能以更自动的方式输入。

 .container {
  display: flex;
  justify-content: space-between;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 60px;
  font-weight: bold;
}
#grad1 {
  height: 55px;
  background-image: linear-gradient(to left, #d91918, #f8542f, #ee77aa, #ffcd46);
}

<head>
<style>

</style>
</head>
<body>

<div id="grad1">
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>

</body>

【问题讨论】：

所以你想让“1”有黄色，而“10”有红色。我说的对吗？
完全正确。以及介于两者之间的其余部分:)
检查我的答案

标签： html css colors gradient

【解决方案1】：

所以通过对你的代码进行一些修改，我已经达到了预期的效果-

将#grad1 和.container 分开。（为方便起见，您可以将其包装在 div 中）
为.container提供相同的背景。
使用两个属性 -webkit-background-clip 和 -webkit-text-fill-color: transparent; 来发挥作用。

-webkit-background-clip 仅保留文本的背景。但是我们看不到它，因为文本不透明。要覆盖默认的color 属性并使文本透明，我们使用-webkit-text-fill-color: transparent。

.container {
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  font-weight: bold;
  background: linear-gradient(to left, #d91918, #f8542f, #ee77aa, #ffcd46);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 5px;
}

#grad1 {
  height: 55px;
  background-image: linear-gradient(to left, #d91918, #f8542f, #ee77aa, #ffcd46);
}

<div id="grad1"></div>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

注意 - 此技巧仅适用于 webkit 浏览器，并且在非 webkit 浏览器上可能会出现问题。为防止这种情况发生，请为文本提供后备颜色属性。

【讨论】：