Pourquoi la couleur d'arrière-plan de mon tableau ne s'affiche-t-elle pas dans l'aperçu avant impression de Chrome ?

L'aperçu avant impression exclut la couleur d'arrière-plan

Lors de l'impression d'une page Web, les couleurs d'arrière-plan spécifiées peuvent ne pas apparaître dans l'aperçu avant impression. Plus précisément, la couleur d'arrière-plan attribuée à un tableau ne s'affiche pas dans l'aperçu avant impression de Chrome.

La propriété CSS suivante a été appliquée sans succès :

-webkit-print-color-adjust: exact;

Résolution du problème

Alors que la propriété CSS print-color-adjust: exact; fonctionne correctement, il existe des étapes de dépannage fondamentales pour garantir que le CSS souhaité prend effet lors de l'impression.

1. Séparer l'impression du CSS de l'écran :

   • Implémentez des requêtes multimédias pour distinguer les styles CSS pour l'impression (@media print) de ceux destinés à l'affichage à l'écran (@media screen).

2. Spécificité CSS accrue :

   • Dans ce cas, la propriété print-color-adjust est fonctionnelle , mais d'autres règles CSS avec une spécificité plus élevée l'écrasent. Pour résoudre ce problème, utilisez la déclaration !important dans les règles d'impression de @media :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!