印刷時にbackground-colorが反映されないときの対処法

今回のテーマ

ページを印刷する際に背景色が反映されないことがありました。

印刷の際にページと同一の色を付与したいにも関わらず反映されないという事態、、

しかし、これはCSSで解決できるようです。

以下に手順を記します。

chromeだけ適用できる設定

CSSで背景色も印刷時に反映されるように指定をしておく。
※chromeしかないプロパティなのでIEやFireFoxでは使えない。

body {
  -webkit-print-color-adjust: exact;
}

次に、!importantを付けて解決

印刷したい箇所の背景色指定には!importantをつける
!importantを付けない場合、上記の設定をしていても表示されないようです。

th {
  background-color: #fff !important;
}

見事解決できました!

参考

https://hacknote.jp/archives/11460/

https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.