替换文本行的背景颜色

Question

我们的项目需要不同长度的文本交替阴影线（灰白 - 灰 - 白......），以不同尺寸等观看，以便在屏幕和打印视图上使用。

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

非常感谢 斯蒂芬

Answer 1

在这里，jsFiddle。

在字体上设置行高，然后将背景大小设置为该高度的两倍。使用50％硬色停止在背景上放置线性渐变，并将其设置为重复。

jsFiddle只是一个快速的东西，我拼凑在Webkit浏览器中显示它。当然，您需要为所有其他浏览器添加供应商特定代码。

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