Wie kann ich Hintergrundbilder in Firefox und Internet Explorer drucken?

Hintergrundbilder in Firefox und Internet Explorer drucken

Beim Versuch, Webseiten zu drucken, die Hintergrundbilder enthalten, können Benutzer auf das Problem dieser Hintergrundbilder stoßen Bilder verschwinden beim Drucken. Ziel dieses Artikels ist es, Lösungen für das Drucken von Hintergrundbildern in Firefox und Internet Explorer bereitzustellen.

Verwenden eines Druck-Stylesheets

Eine effektive Methode ist die Verwendung eines Druck-Stylesheets . Dabei wird für die Druckversion der Seite eine eigene CSS-Datei erstellt, in der die gewünschten Druckeinstellungen festgelegt werden können. Zum Beispiel:

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

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

Dieses CSS-Snippet würde das Hintergrundbild für die Klasse „.star“ auf dem Bildschirm anzeigen, es aber beim Drucken durch ein Sternchen (*) ersetzen.

Inline-Bilder verwenden

Ein anderer Ansatz besteht darin, Inline-Bilder zu verwenden, anstatt sich auf Hintergrundbilder zu verlassen. Damit können Sie die Sichtbarkeit von Bildern basierend auf Druckmedien festlegen:

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

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

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

Mit dieser Methode wird das Sternbild auf dem Bildschirm ausgeblendet, aber beim Drucken sichtbar.

Angeben Stylesheets drucken

Um abschließend anzugeben, welches Stylesheet zum Drucken verwendet werden soll, fügen Sie ein „Medien“-Attribut in das Feld „“ ein. Element:

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

Diese Konfiguration stellt sicher, dass „main.css“ für die Anzeige auf dem Bildschirm verwendet wird, während „print.css“ zum Drucken verwendet wird. Durch die Implementierung einer dieser Lösungen können Benutzer erfolgreich Hintergrundbilder in Firefox und Internet Explorer drucken.

Das obige ist der detaillierte Inhalt vonWie kann ich Hintergrundbilder in Firefox und Internet Explorer drucken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!