替换文本行的背景色

Question

Our project calls for alternately shaded lines (gray-white-gray-white ...) of texts of different lengths, viewed at different sizes, etc., for on-screen and print viewing.

I don't think alternating table rows or divs is a solution because the # of words on a line (or in a row/div/span) may change with font sizes and browser resizing.

Thanks very much Stephen

Answer 1

Here you go, jsFiddle .

Set a line-height on the font, then set a background-size to exactly twice that height. Put a linear gradient on the background with a 50% hard color stop, and set it to repeat.

The jsFiddle is just a quick thing I threw together to display this in Webkit browsers. You'll need to add in vendor specific code for all other browsers, of course.

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