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

好问题！对于仅CSS的实现,您可以使用webkit-background-clip的魔力以及渐变.

你可以在https://jsfiddle.net/kavot054/尝试我的解决方案,我也在下面放了HTML和CSS代码.

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

值得注意的是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;

}

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.