我正在尝试更改段落的替换行上的文本颜色。问题是，段落中的行数取决于屏幕大小。在CSS中是否有一种方法可以为<p>标记内的每一行提供备用文本颜色？
例如，在以下代码中
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>
每行文字应该是另一种颜色，无论哪些字实际上在哪一行（显然取决于屏幕尺寸）。
我的第一直觉是尝试根据屏幕尺寸计算行数，但后来我不知道该去哪里。
答案 0 :(得分：6)
好问题！对于仅限CSS的实现，您可以使用webkit-background-clip的魔力以及渐变。
您可以在https://jsfiddle.net/kavot054/试用我的解决方案，我还在下面提供了HTML和CSS代码。
注意文本的line-height与渐变之间的关系;如果您要更改字体，例如，您需要更新这两个字体。
值得注意的是，webkit-background-clip仅适用于webkit浏览器，因此在考虑您网站的可访问性时需要谨慎。
p {
line-height: 30px;
background: -webkit-repeating-linear-gradient(red, red 30px, blue 30px, blue 60px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas.
Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>