CSSで背景色や背景画像を印刷する方法

15070 Views
CSS3
CSSで背景色や背景画像を印刷する方法

たまにあるのですが、このページ印刷にも対応してくださーい。

コーダーの方はご存知の方も多いのですが、印刷に対応するの難しくはないのですが面倒臭さがあるのです!
(何も知らないディレクターが軽々とOKしてくて30ページ近くあるような中規模以上のサイトの時の絶望感といったら。。。)

このルールさえ知っていれば対応はある程度楽になると思うのでご紹介。

SNSでシェア♪

スポンサーリンク

目次

Chromeにはこれ

cssの頭の行などに

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

を記述してあげてください!
注意点としては記述するCSSを読み込んでいるlinkのmedia属性が「all」または「print」になっていることを確認してください!
(デフォルトのメディア属性はallです)

 

FireFoxには

firefoxでは背景画像は出るのに背景色が出ない!
って問題に当たると思います。

その場合は、背景色を指定している箇所で「!important」を追加してみてください。
それだけで表示されるはずです。

ただし、上書きの重ね合いになることもあるのでHTMLやCSSの記述する順番には気をつけましょう!

 

以上。

SNSでシェア♪

スポンサーリンク

関連記事