Warum wird die Hintergrundfarbe meiner Tabelle in der Druckvorschau von Chrome nicht angezeigt?

Druckvorschau schließt Hintergrundfarbe aus

Beim Drucken einer Webseite werden bestimmte Hintergrundfarben möglicherweise nicht in der Druckvorschau angezeigt. Konkret wird die einer Tabelle zugewiesene Hintergrundfarbe nicht in der Druckvorschau von Chrome angezeigt.

Die folgende CSS-Eigenschaft wurde erfolglos angewendet:

-webkit-print-color-adjust: exact;

Problem wird gelöst

Während die CSS-Eigenschaft print-color-adjust: Exact; funktioniert, gibt es grundlegende Schritte zur Fehlerbehebung, um sicherzustellen, dass das gewünschte CSS beim Drucken wirksam wird.

1. Druck- und Bildschirm-CSS trennen:

   • Implementieren Sie Medienabfragen, um CSS-Stile für den Druck (@media print) von denen für die Bildschirmanzeige (@media) zu unterscheiden Bildschirm).

2. Erhöhte CSS-Spezifität:

   • In diesem Fall ist die Eigenschaft „print-color-adjust“ funktionsfähig , aber andere CSS-Regeln mit höherer Spezifität überschreiben es. Um dieses Problem zu beheben, verwenden Sie die !important-Deklaration in den @media-Druckregeln:

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

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

Das obige ist der detaillierte Inhalt vonWarum wird die Hintergrundfarbe meiner Tabelle in der Druckvorschau von Chrome nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!