読者です 読者をやめる 読者になる 読者になる

Blog, The

1 月 22 日生まれ、ブログ座です。

Chrome で背景色や背景画像を印刷する

css

Chrome は単体で PDF を印刷する機能を持ってて便利なんですが、CSS の background-color や background-image が反映されません。

「背景を印刷」みたいなオプションも見当たらなかったので、無理なんかなーって思ってたんですが、どうやら CSS で解決できるっぽいです。

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

人様のページであっても、デベロッパーツールを使えばなんとかなります。

f:id:tkmsaoi:20120920211457p:plain

-webkit ってベンダープレフィックスが付いてますが、Safari 5 では動きませんでした。
未だに Snow Leopard を使ってるもんで、Safari 6 は確認できてません。

以下、参考にさせてもらいました。

TIP: Print CSS backgrounds in Google Chrome & Safari webkit


おまけ

各ブラウザが「背景を印刷」的なオプションを持ってるのか、気になったのでついでに調べてみました。

IE 9
"ページ設定" → "背景の色とイメージを印刷する"
Firefox 15
"ページ設定" → "背景色と背景画像も印刷"
Opera 12
"印刷オプション" → "背景を印刷する"
Chrome 21
見当たらず
Safari 5 (Windows)
見当たらず (ていうか Windows 版の Safari は終了っていう認識でいいの?)
Safari 5 (Mac)
"プリント" → "プリンタ" の右の下矢印 → "背景をプリント"

設定さえすれば大体どのブラウザでも印刷できるんですね。設定さえすれば。