这个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属性。

其次他将qazxsw poi设置为仅将qazxsw poi应用于background-clip CSS property标签中的文本的文本。

最后他background-image和该属性将使文本填充颜色透明。

结果如下

<p>

-webkit-text-fill-color

Answer 2

如果你将删除

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>

另一个技巧是内联背景图像，它定义了渐变本身。就这个：

-webkit-background-clip

如果你要调整它的大小 - 你会发现非常相似的结果：

剩余样式定义背景大小，因此它将大致覆盖整个段落

Answer 3

正在设置具有渐变的图像。您还可以使用实现类似的效果。

background:url(...)指定背景应在元素内延伸的距离。

background:linear-gradient指定文本字符的填充颜色。