Chrome の印刷プレビューにテーブルの背景色が表示されないのはなぜですか?

印刷プレビューで背景色が除外される

Web ページを印刷する場合、指定した背景色が印刷プレビューに表示されないことがあります。具体的には、表に割り当てられた背景色が Chrome の印刷プレビューに表示されません。

次の CSS プロパティは正常に適用されませんでした:

-webkit-print-color-adjust: exact;

問題の解決

CSS プロパティ print-color-adjust:exact;正しく機能する場合は、印刷時に目的の CSS が確実に有効になるようにするための基本的なトラブルシューティング手順があります。

1. 画面 CSS から印刷を分離する:

   • 印刷用の CSS スタイル (@media print) と画面表示用の CSS スタイル (@media) を区別するメディア クエリを実装します。

2. CSS の詳細度の向上:

   • この場合、print-color-adjust プロパティが機能します。ですが、より具体性の高い他の CSS ルールがそれを上書きします。これを解決するには、@media 印刷ルールで ! important 宣言を使用します:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

以上がChrome の印刷プレビューにテーブルの背景色が表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。