Web 上で印刷するときに注意する必要がある CSS スタイル-CSSチュートリアル-php.cn

Web 上で印刷するときに注意する必要がある CSS スタイル

一个新手

リリース： 2017-09-14 11:11:09

オリジナル

1992 人が閲覧しました

今日フロントエンドで印刷する関数を書いたのですが、設定した背景色が印刷時に機能しませんでした:
機能しなかったCSSスタイル:

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

ログイン後にコピー

結果は機能しませんでした。何はともあれ、
Web 上で印刷するときに注意する必要がある CSS スタイル

その後、さまざまな方法で解決しました:
以下は解決コードです:

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

ログイン後にコピー

結果は次のとおりです:
Web 上で印刷するときに注意する必要がある CSS スタイル

以前は表示されなかった背景色が表示されました！
最も重要なコードは @media print { <br> .p_class2_1 {-webkit-print-color-adjust: 正確;} <br> .p_class3_1 {-webkit-print-color-adjust: 正確;} <br> .p_class5_1 {-webkit-print-color-adjust: 正確;} <br> } @media print は印刷時に背景色を表示するためのものです。デフォルトでは表示されません。

以上がWeb 上で印刷するときに注意する必要がある CSS スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。