html - 印刷用スタイルシート、背景色無視

Question

各 tr にクラス「奇数」と「偶数」を与えることを循環するテーブルを作成します。私のスタイルシートでは、これを持っています：

テーブル tbody tr.odd {
    背景色: #cccccc;
}

これはブラウザからは機能しますが、印刷時には機能しません。この背景色を除いて、メディア スタイルシートの他のすべてが機能します。

印刷用にカラーを有効にしているので、画像をカラーで印刷できます...そうですか?

Answer 1

デフォルトでは、ほとんどのブラウザーは、印刷時に CSS の背景色と画像を無視します。これは、ブラウザーにそのようなオプションがある場合にのみ、ブラウザーの設定を変更することによってのみオーバーライドできます (Quentin が指摘しているように、そうでないものもあります)。

Answer 2

印刷プレビューで div の背景色を実現できます。の枠の色divForBgColor:beforeが の背景色になりdivForBgColorます。

.divForBgColor {
    position: relative;
    overflow: hidden;
}

.divForBgColor:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 9999px solid #f1f2f2;
    z-index: -1;
}