Firefox および Internet Explorer で背景画像を印刷するにはどうすればよいですか?

Firefox および Internet Explorer での背景画像の印刷

背景画像を組み込んだ Web ページを印刷しようとすると、次の問題が発生する可能性があります。印刷すると画像が消えてしまいます。この記事の目的は、Firefox および Internet Explorer で背景画像の印刷を有効にするためのソリューションを提供することです。

印刷スタイルシートの使用

効果的な方法の 1 つは、印刷スタイルシートを利用することです。 。これには、ページの印刷バージョン用に別の CSS ファイルを作成することが含まれ、そこで必要な印刷設定を指定できます。例:

/* media:screen */
.star {
    background: ...;
    overflow: hidden;
    text-indent: 9999em;
}

/* media:print */
.star {
    text-indent: 0;
}

この CSS スニペットは、画面上に「.star」クラスの背景画像を表示しますが、印刷時にはアスタリスク (*) に置き換えられます。

インライン画像の使用

もう 1 つのアプローチは、背景画像に依存する代わりにインライン画像を使用することです。これにより、印刷メディアに基づいて画像の表示/非表示を指定できます:

<div class="star"><img src="./images/star.jpg" alt="*" /></div>

/* media:screen */
.star img {
    visibility: hidden;
}

/* media:print */
.star img {
    visibility: visible;
}

このメソッドでは、星の画像は画面上では非表示になりますが、印刷時には表示されます。

指定印刷スタイルシート

最後に、印刷に使用するスタイルシートを指定するには、「media」属性を「<リンク>」 element:

<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />

この構成により、「main.css」は画面上の表示に使用され、「print.css」は印刷に使用されます。これらのソリューションのいずれかを実装することで、ユーザーは Firefox と Internet Explorer で背景画像を正常に印刷できるようになります。

以上がFirefox および Internet Explorer で背景画像を印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。