CSS-Stile, auf die Sie beim Drucken im Web achten müssen

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;}

.p_class3_1 {-webkit-print-color-adjust: Exact;}

.p_class5_1 {-webkit-print-color-adjust: Exact;}

@media print soll beim Drucken die Hintergrundfarbe anzeigen. Diese wird standardmäßig nicht angezeigt!

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!