我正在尝试更改段落交替行上的文本颜色。问题是，段落中的行数将取决于屏幕大小等因素。在 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>
文本的每一行都应该是不同的颜色不管哪些词实际上在哪几行(这显然取决于屏幕尺寸)。
我的第一直觉是尝试根据屏幕尺寸计算行数，但后来我不确定从那里去哪里。
最佳答案
好问题!对于此的纯 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>关于html - 每行段落的替代文本颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41416999/