[CSS]背景に指定した画像を印刷させる方法

Dan Philibinのブログに、背景に指定した画像を印刷時に表示させる方法がありました。

The Easy (and valid) Way to Print Background Images

HTML

<h1 id="logo">Site Name</h1>

CSS

h1#logo{
  background: url(images/logo.gif); height: 75px; width: 137px; text-indent: -9999px;
}

上記のコードを下記のコードに変更します。

HTML

<h1 id="logo">Site Name</h1>
<img src="images/logo.gif" class="nodisplay" />

Screen CSS

h1#logo{
  background: url(images/logo.gif); height: 75px; width: 137px; text-indent: -9999px; 
}
img.nodisplay{
  display:&nbsp;none;
}

Print CSS

h1#logo{
  display: none;
}
img.nodisplay{
  display: block;
}

テキストと画像を両方とも記述し、通常時(Screen.css)では画像を非表示、印刷時(Print.css)ではテキストを非表示にするものです。

スクリーン用と印刷用とを別々にするのは考えたことがなかったな、と思いました。

sponsors

top of page

©2018 coliss