ホームページ > 記事 > ウェブフロントエンド > Web 上で印刷するときに注意する必要がある CSS スタイル
今日フロントエンドで印刷する関数を書いたのですが、設定した背景色が印刷時に機能しませんでした:
機能しなかった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%; }
結果は機能しませんでした。何はともあれ、
その後、さまざまな方法で解決しました:
以下は解決コードです:
.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;} }
結果は次のとおりです:
以前は表示されなかった背景色が表示されました!
最も重要なコードは @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 サイトの他の関連記事を参照してください。