Styles CSS auxquels vous devez prêter attention lors de l'impression sur le Web-tutoriel CSS-php.cn

Styles CSS auxquels vous devez prêter attention lors de l'impression sur le Web

一个新手

Libérer： 2017-09-14 11:11:09

original

1978 Les gens l'ont consulté

Aujourd'hui, j'ai écrit une fonction qui s'imprime sur le front-end, et j'ai rencontré un problème très pitoyable. La couleur de fond définie ne fonctionnait pas lors de l'impression :
Le style css qui ne fonctionnait pas :

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

Copier après la connexion

<. 🎜 >Rien n'a fonctionné,

Styles CSS auxquels vous devez prêter attention lors de limpression sur le Web

Plus tard, le problème a été résolu par diverses méthodes :

Voici le code de la solution :

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

Copier après la connexion

Le résultat est le suivant :

Styles CSS auxquels vous devez prêter attention lors de limpression sur le Web

J'ai constaté que la couleur de fond qui n'était pas affichée auparavant est désormais affichée !

Le code principal est @media print { .p_class2_1 {-webkit-print-color-adjust : exact ;} <code>@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;} } .p_class3_1 {-webkit-print-color-adjust : exact ;}

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

} @media print consiste à afficher la couleur de fond lors de l'impression. Elle n'est pas affichée par défaut !

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!