javascript - 交替文本行的背景颜色

Question

我们的元素要求不同长度的文本的交替阴影线(灰-白-灰-白......)，以不同的大小等方式查看，以用于屏幕和打印查看。

我不认为交替表格行或 div 是一种解决方案，因为一行(或一行/div/span)中的单词数量可能会随着字体大小和浏览器大小的调整而改变。

非常感谢斯蒂芬

Answer 1

给你，jsFiddle .

设置字体的行高，然后将背景大小设置为该高度的两倍。在背景上放置一个带有 50% 硬色标的线性渐变，并将其设置为重复。

jsFiddle 只是我拼凑起来的一个快速工具，用于在 Webkit 浏览器中显示它。当然，您需要为所有其他浏览器添加 vendor 特定代码。

p {
    line-height: 16px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, lightgray), color-stop(51%, white));
    background-size: 100% 32px;
}​