media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。
カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくいくけど、2 バイト文字だと完全に文字が隠れないんで実は使えない。なんで、サンプル作ってみたけどヘッダ部分の h1 には 1 バイト文字使ってる。
うーん、そもそも最近 image replacement （背景画像置換）やんないから使うことは無いな。
Comments
こんにちは。
最近、印刷用のCSSを設定することが多くなってきたのですが、背景が像が印刷されないのが悩みでした。
（ブラウザーの設定で「背景イメージを印刷する」にすると出るようですが）
なるほど、こうするといいのですね。
いつも貴重な情報を有り難うございます。
最近画像置換を使わないということは、タグで埋め込むということですか？
>最近画像置換を使わないということは、タグで埋め込むということですか？
文字自体を text-indent やその他の方法で飛ばしてしまうのはやらなくなりましたね。画像非表示の環境で意味が伝わらなくなってしまうのは避けるようにしています。
今の当サイトのスタイルでも、画像非表示でも問題ないように作ってはいるつもりっす ;-)
早速のご返事有り難うございます
画像非表示にも配慮されているのですね。さすがです。
私もh1やナビゲーションボタンに画像を使うとき、イメージタグを使うか、画像置換にするかいつも迷っています。
ナビゲーションボタンを画像のロールオーバーにする場合、イメージタグを使って画像をはめ込むとJavascriptにしなければいけないので、ついつい画像置換+CSSによるロールオーバーにしてしまいがちなのですが、そのてんはどうされてるのでしょうか？
もし何かよいアドバイスがございましたら是非よろしくお願いいたします。
CSS初心者のため、はずしていたら申し訳ありません(^.^;)
僕自身は、そのサイトのターゲットユーザによって img 要素 + JavaScript なのか、画像置換を使うのかの判断をすれば良いのかなと思ってます。
こうじゃなければいけないってのは無いかと :-)
ご返事が遅くなって申し訳ありません。
アドバイス有り難うございます。
了解いたしました。
その都度考えてゆこうと思います。
有り難うございました。
注：firefox、operaは無理
かと思いきやいけた。 これはいい！
かと思いきや．．．IE７ではうまくいかない．．． どうすればよいでしょう。