是否可以使用 CSS 对每一行文本应用不同的水平颜色渐变答案

【问题标题】：Is it possible to apply a different horizontal color gradients to each line of text using CSS是否可以使用 CSS 对每一行文本应用不同的水平颜色渐变
【发布时间】：2018-06-10 13:45:59
【问题描述】：

有几个将水平颜色渐变应用于正文的示例。

但是，这些示例中使用的技术是使背景具有渐变，然后使文本清晰，然后文本将具有渐变。

例子包括

这对我的目标不起作用。我希望拥有它，以便每一行文本都有不同的渐变。例如，第 1 行将具有从红色到黑色的渐变。第二行将具有从黑色到蓝色的渐变。第 3 行将有一个从蓝色到红色的渐变。

这是我正在寻找的示例：

我知道也可以应用径向渐变，但这也不起作用，因为必须针对文本正文长度的文本大小的任何变化重新调整 CSS。

【问题讨论】：

标签： css

【解决方案1】：

您可以设置不同的背景，每行一个。但我没有看到一种方法来适应大量的行

p {
    background-image: linear-gradient(to right, red, blue), 
    linear-gradient(to right, green, yellow), linear-gradient(to right,purple, cyan);
    background-size: 100% 1.2em;
    background-position: left 0, left 1.2em, left 2.4em;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
}

&lt;p&gt;blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah&lt;/p&gt;

【讨论】：