Wie steuere ich die Sichtbarkeit von Inhalten beim Drucken in CSS?

Druckspezifisches CSS: Ausgewählte Inhalte anzeigen

In der Webentwicklung können Sie auf Szenarien stoßen, in denen Sie die Sichtbarkeit bestimmter Inhalte basierend darauf steuern müssen, ob der Benutzer dies tut Drucken einer Seite. CSS bietet mit seiner Funktion „@media print“ eine Lösung hierfür.

Browser-Unterstützung

Die meisten gängigen Browser unterstützen „@media print“ und stellen so sicher, dass Ihre Druckstile funktioniert auf modernen Geräten.

Nicht druckbare Elemente ausblenden

Um nur ausgewählte Elemente anzuzeigen Beim Drucken können wir auf zwei Arten vorgehen:

Direkte Tagging-Methode:

1. Fügen Sie den Elementen, die Sie drucken möchten, eine „druckbare“ Klasse hinzu.
2. Verwenden Sie „@media print“, um alle Elemente außer denen mit „druckbar“ auszublenden. Klasse:

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

Negative Auswahlmethode:

1. Anstatt druckbare Elemente zu markieren, können wir alle nicht druckbaren Elemente ausblenden:

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

Umgang mit Links und Logos

Neben dem Ausblenden nicht druckbarer Elemente möchten Sie möglicherweise auch Logos oder Briefkopfinformationen nur auf gedruckten Seiten anzeigen. Dies kann mit folgendem Ansatz erreicht werden:

@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="logo.png">
   <img src="letterhead.png">
</div>

Dadurch werden Elemente mit der Klasse „noPrint“ im Druckmodus ausgeblendet, während Elemente mit der Klasse „onlyPrint“ nur auf gedruckten Seiten angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie steuere ich die Sichtbarkeit von Inhalten beim Drucken in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!