Heute habe ich eine Funktion geschrieben, die im Frontend gedruckt wird, und bin auf ein sehr verwirrendes Problem gestoßen. Die eingestellte Hintergrundfarbe funktionierte beim Drucken nicht:
Ineffektiver CSS-Stil:
.p_class2_1{
color:white;
float:left;
background: #808080!important;
width:80%;
}
.p_class3_1{
color:white;
float:left;
background: #808080!important;
width:100%;
}
.p_class5_1{
color:white;
background: #808080!important;
width:100%;
}Das Ergebnis war, dass nichts funktionierte. 
Später wurde es mit verschiedenen Methoden gelöst:
Das Folgende ist der Lösungscode:
.p_class2_1{
color:white;
float:left;
background: #808080!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');
width:80%;
}
.p_class3_1{
color:white;
float:left;
background: #808080!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');
width:100%;}
.p_class5_1{
color:white;
background: #808080!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');
width:100%;}
@media print {
.p_class2_1 {-webkit-print-color-adjust: exact;}
.p_class3_1 {-webkit-print-color-adjust: exact;}
.p_class5_1 {-webkit-print-color-adjust: exact;}
}Das Ergebnis ist wie folgt : 
Ich habe festgestellt, dass die Hintergrundfarbe, die vorher nicht angezeigt wurde, jetzt angezeigt wird!
Der Hauptcode ist @media print { <code>@media print { <br>
.p_class2_1 {-webkit-print-color-adjust: exact;} <br>
.p_class3_1 {-webkit-print-color-adjust: exact;} <br>
.p_class5_1 {-webkit-print-color-adjust: exact;} <br>
}
.p_class2_1 {-webkit-print-color-adjust: Exact;}
Das obige ist der detaillierte Inhalt vonCSS-Stile, auf die Sie beim Drucken im Web achten müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
