CSS-Stile, auf die Sie beim Drucken im Web achten müssen-CSS-Tutorial-php.cn

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

一个新手

Freigeben： 2017-09-14 11:11:09

Original

1993 Leute haben es durchsucht

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

Nach dem Login kopieren

Das Ergebnis war, dass nichts funktionierte.
CSS-Stile, auf die Sie beim Drucken im Web achten müssen

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=&#39;#808080&#39;,EndColorStr=&#39;#808080&#39;);  
       width:80%;
       }
       .p_class3_1{     
       color:white;     
       float:left;    
       background: #808080!important;  
     filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#808080&#39;,EndColorStr=&#39;#808080&#39;);  
     width:100%;}
     .p_class5_1{     
     color:white;     
     background: #808080!important;  
     filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#808080&#39;,EndColorStr=&#39;#808080&#39;);  
     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;} 
    }

Nach dem Login kopieren

Das Ergebnis ist wie folgt :
CSS-Stile, auf die Sie beim Drucken im Web achten müssen

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!