javascript - テキスト行の背景色を変更する

Question

私たちのプロジェクトでは、画面上および印刷物で表示するために、さまざまなサイズで表示される、さまざまな長さのテキストの交互に陰影が付けられた線 (グレー - ホワイト - グレー - ホワイト ...) が必要です。

行 (または行/div/スパン) の単語数は、フォント サイズとブラウザーのサイズ変更によって変化する可能性があるため、表の行または div を交互に配置することは解決策ではないと思います。

どうもありがとうスティーブン

Answer 1

じゃあ、jsFiddle。

フォントに行の高さを設定してから、背景のサイズをその高さのちょうど2倍に設定します。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;
}​