chromeとFirefoxで背景色が印刷できない場合にCSSで行うこと

harada 7,265views 更新:2015年6月18日

Webサイトを背景色まで含めて印刷したいのにプレビューで表示されない場合は下記の内容を確認して下さい。

(1)Firefox

「アピアランス:背景色をプリント」にチェックを入れておく。

(2)chrome

CSSで背景まで印刷する指定をしておく。こちらはchromeしかないプロパティのようです。

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

(3)印刷したい箇所の背景色指定には!importantをつける

!importantを付けない場合上記(1)(2)の設定をしていても表示されないようです。

CSS例

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

(3)が分からなくて困っていましたが、important指定をすることで無事に表示されるようになりました。

参考:Background color not showing in print preview

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません