Wie kann ich mithilfe von CSS-Medienabfragen nur ein bestimmtes Div drucken?

Drucken spezifischer Inhalte mithilfe von CSS-Medienabfragen

Die Anforderung, nur ein bestimmtes Div auf einer Webseite zu drucken, stellt beim Versuch, sie beizubehalten, eine Herausforderung dar sein Aussehen und schließen unerwünschte Elemente aus. Dieses Problem kann mithilfe von CSS-Medienabfragen effektiv behoben werden.

Das folgende CSS-Code-Snippet bietet eine Lösung, mit der Sie das angegebene Div drucken können, ohne andere Inhalte auf der Seite zu beeinträchtigen:

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

In diesem CSS-Code:

• Der @media print {}-Block definiert druckspezifische Stile.
• Das body-Element ist zugewiesene Sichtbarkeit: ausgeblendet, um alle anderen Elemente auf der Seite zu verbergen.
• Dem #section-to-print-Div (das den gewünschten Inhalt enthält) wird die Sichtbarkeit zugewiesen: sichtbar, um sicherzustellen, dass es im Druck angezeigt wird.
• Position: absolut zusammen mit links: 0 und oben: 0 stellen Sie sicher, dass das Div korrekt im druckbaren Bereich positioniert ist.

Mit dieser Methode können Sie das gewünschte drucken div, ohne einen neuen Druckvorschaudialog auszulösen oder das ursprüngliche Seitenlayout zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS-Medienabfragen nur ein bestimmtes Div drucken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!