CSS で印刷時のコンテンツの可視性を制御するにはどうすればよいですか?

印刷固有の CSS: 選択したコンテンツの表示

Web 開発では、ユーザーがページを印刷します。 CSS は、「@media print」機能を通じてこの問題に対する解決策を提供します。

ブラウザのサポート

ほとんどの主要なブラウザは「@media print」をサポートしており、印刷スタイルを保証します。

印刷不可能な要素を非表示にする

印刷時に選択した要素のみを表示するには、次の 2 つの方法でアプローチできます:

直接タグ付け方法:

1. 印刷する要素に「printable」クラスを追加します。
2. すべての要素を非表示にするには、「@media print」を使用します。 「印刷可能」クラスの要素を除く:

@media print {
  * { display: none; }
  .printable, .printable > * { display: block; }
}

ネガティブ選択メソッド:

1. 印刷可能な要素をタグ付けする代わりに、すべてを非表示にすることができます。印刷不可能な要素:

@media print {
  body *:not(.printable *) { display: none; }
}

リンクとロゴの処理

印刷不可能な要素を非表示にすることに加えて、ロゴやロゴを表示することもできます。レターヘッド情報は印刷されたページにのみ表示されます。これは、次のアプローチを使用して実現できます。

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

<div class="noPrint">
   <a href="links.html">Links</a>
</div>
<div class="onlyPrint">
   <img  src="/static/imghwm/default1.png" data-src="logo.png" class="lazy" alt="CSS で印刷時のコンテンツの可視性を制御するにはどうすればよいですか?" >
   <img  src="/static/imghwm/default1.png" data-src="letterhead.png" class="lazy" alt="CSS で印刷時のコンテンツの可視性を制御するにはどうすればよいですか?" >
</div>

これにより、印刷モードでは「noPrint」クラスの要素が非表示になり、印刷ページでのみ「onlyPrint」クラスの要素が表示されます。

以上がCSS で印刷時のコンテンツの可視性を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。