css - 这段 CSS 代码如何对每行文本应用不同的水平颜色渐变？

Question

我找到了一个可以将颜色渐变应用于特定文本行的 jsfiddle。它为每行文本应用不同的 2 颜色渐变。它有一个一致的模式。黑变红，红变黑，黑变蓝，蓝变黑。

虽然我不知道它是如何工作的。谁能解释一下？

这是 jsfiddle

https://jsfiddle.net/cers/o9s70yjq/2/

这是代码

HTML

<p><em>Nobody is perfect.</em> At times we have difficulty managing our finances, we don’t always take our medications as planned, and sometimes we don’t perform up to par at work. However, research shows that people experience these problems to different degrees. Across financial strata, research reveals that the financially less well-off engage in these behaviors more often than those who are financially stable (1). These behaviors are particularly concerning, because, for those with limited financial resources, they can lead to poverty as well as perpetuate it.</p>

<p>In their article, “<a href="http://www.sciencemag.org/content/341/6149/976">Poverty Impedes Cognitive Function</a>,” which appears in the latest issue of Science, University of Warwick Professor Anandi Mani and several other social scientists (2) suggest poverty, and the ever-present concerns that come with it, places an undue burden on an individual’s limited mental resources. Compared with those who are free from poverty, this burden leaves those in poverty with fewer cognitive resources with which to make choices and take action. Mani et al. write, the poor “are less capable not because of inherent traits, but because the very context of poverty imposes load and impedes cognitive capacity.”</p>

<p>However, it is important to note that their explanation is not limited to the traditional populations of poverty, defined by a specific income level or ability to access basic human needs. The authors define poverty “broadly as the gap between one’s needs and the resources available to fulfill them.” That is, people in poverty are those who feel “poor,” who feel they have less than they need.</p>

这是CSS

p {
  margin: 0 0 1.5em 0;
  line-height: 1.5em;
  padding: 0;
  background: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%02%00%00%00%3C%08%02%00%00%00%C3%A4%FC%AE%00%00%00%25IDAT%18%D3c```%F8%CF%C0%C0%C4%C0%C0%C0%40S%8A%E1%3F%ADm%80Y%04%B1%8D.%16%FD%A7%8B%8F%00e%B4%04m%18%DC%1D%8A%00%00%00%00IEND%AEB`%82) 0 0 / 100% 6em repeat-y;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

em {
  font-weight: bolder;
  font-style: normal;
}

a {
  text-decoration-color: black;
}

Answer 1

这个 jsfiddle 中的技巧是:

首先他设置了一个 background 到 <p>这意味着红色和蓝色来自 background-image属性(property)。

然后他设置了 background-clip CSS property 适用于 background-image 的文本仅适用于 <p> 中的文本标签。

最后他 -webkit-text-fill-color 该属性将使文本填充颜色透明。

结果如下

p {
  margin: 0 0 1.5em 0;
  line-height: 1.5em;
  padding: 0;
  background: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%02%00%00%00%3C%08%02%00%00%00%C3%A4%FC%AE%00%00%00%25IDAT%18%D3c```%F8%CF%C0%C0%C4%C0%C0%C0%40S%8A%E1%3F%ADm%80Y%04%B1%8D.%16%FD%A7%8B%8F%00e%B4%04m%18%DC%1D%8A%00%00%00%00IEND%AEB`%82) 0 0 / 100% 6em repeat-y;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

em {
  font-weight: bolder;
  font-style: normal;
}

a {
  text-decoration-color: black;
}

<p><em>Nobody is perfect.</em> At times we have difficulty managing our finances, we don’t always take our medications as planned, and sometimes we don’t perform up to par at work. However, research shows that people experience these problems to different degrees. Across financial strata, research reveals that the financially less well-off engage in these behaviors more often than those who are financially stable (1). These behaviors are particularly concerning, because, for those with limited financial resources, they can lead to poverty as well as perpetuate it.</p>

<p>In their article, “<a href="http://www.sciencemag.org/content/341/6149/976">Poverty Impedes Cognitive Function</a>,” which appears in the latest issue of Science, University of Warwick Professor Anandi Mani and several other social scientists (2) suggest poverty, and the ever-present concerns that come with it, places an undue burden on an individual’s limited mental resources. Compared with those who are free from poverty, this burden leaves those in poverty with fewer cognitive resources with which to make choices and take action. Mani et al. write, the poor “are less capable not because of inherent traits, but because the very context of poverty imposes load and impedes cognitive capacity.”</p>

<p>However, it is important to note that their explanation is not limited to the traditional populations of poverty, defined by a specific income level or ability to access basic human needs. The authors define poverty “broadly as the gap between one’s needs and the resources available to fulfill them.” That is, people in poverty are those who feel “poor,” who feel they have less than they need.</p>