从 css 渐变中选择颜色为文本着色

Question

我在 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>

Answer 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 浏览器上可能会出现问题。为防止出现这种情况，请为文本提供后备颜色属性。

从 css 渐变中选择颜色为文本着色

pick color from css gradient for coloring text

html

css

gradient

colors