[CSS]背景に指定した画像を印刷させる方法
Post on:2007年10月4日
sponsors
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: none;
}
Print CSS
h1#logo{
display: none;
}
img.nodisplay{
display: block;
}
テキストと画像を両方とも記述し、通常時(Screen.css)では画像を非表示、印刷時(Print.css)ではテキストを非表示にするものです。
スクリーン用と印刷用とを別々にするのは考えたことがなかったな、と思いました。
sponsors
