html – 段落每行的备用文本颜色

概述我试图更改段落的替换行上的文本颜色.问题是,段落中的行数取决于屏幕大小.在CSS中是否有一种方法可以为< p>中的每一行提供替代文本颜色？标签？ 例如,在以下代码中 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim ve 我试图更改段落的替换行上的文本颜色.问题是,段落中的行数取决于屏幕大小.在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代码.

注意文本的行高和渐变之间的关系;如果您要@R_299_6502@,例如,您需要更新这两个字体.

值得注意的是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,cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas.  Nulla non faucibus velit,posuere erat.</p>

总结

以上是内存溢出为你收集整理的html – 段落每行的备用文本颜色全部内容，希望文章能够帮你解决html – 段落每行的备用文本颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。