wake-up-neo.com

Wie bekomme ich ein Hintergrundbild zum Drucken mit css?

Ich verwende das ASP Net Sprites-Paket , um CSS-Sprites auf meiner Website zu erstellen.

Es funktioniert, aber die Bilder, die es erzeugt, werden beim Drucken nicht angezeigt.

Der auf HTML-Ebene generierte Code lautet:

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>

Wie kann ich das Logo anzeigen, wenn ein Benutzer die Seite druckt?

Ich habe versucht, dies in mein print.css-Stylesheet einzufügen, aber es hat nicht funktioniert:

#siteLogo
{
    visibility: visible;
}

Die print.css funktioniert einwandfrei und formatiert die Seite so, wie ich sie für andere Elemente auf der Seite möchte. Mein einziges Problem ist, dass das Logo des Site-Logos nicht angezeigt werden kann, wenn es gedruckt wird.

htmlcssprintingimage
24
Techboy

Es ist Sache des Benutzers und seiner Browsereinstellungen, Hintergrundbilder zu drucken oder nicht. Damit Sie sich nicht darauf verlassen können, fügen Sie die Bilder direkt mit einem <img />-Tag in den HTML-Code ein. 

24
Kon

Für Chrome und Safari können Sie Folgendes in Ihr CSS einfügen:

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

Bei anderen Webbrowsern muss der Benutzer leider manuell die Option zum Drucken von Hintergrundbildern auswählen (z. B. für Benutzer mit IE 9, 10 und 11 müssen sie auf das Zahnradsymbol klicken -> Drucken -> Seite einrichten.) und aktivieren Sie die Option)

93
Johann

Sie könnten eine eigene Medienabfrage zum Ausdrucken haben und verwenden: vor dem Selektor mit dem Attribut "Inhalt".

Fügen Sie dies in die Medienabfrage ein und das Bild wird eingefügt, wenn Sie versuchen, zu drucken: 

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/

37
Charlie

Es funktioniert in Google Chrome, wenn Sie dem Hintergrundbild das wichtige Attribut hinzufügen. Stellen Sie sicher, dass Sie das Attribut zuerst hinzufügen und es dann erneut versuchen. Sie können dies folgendermaßen tun:

.class-name {
background: url('your-image.png') !important;
}

Sie können auch diese nützlichen Druckregeln verwenden und am Ende der CSS-Datei einfügen:

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
3
Hady El-Hady

Ihr Hauptdokument importiert 2 Stylesheets, 1 für den Bildschirm und eines für den Drucker. Sie können die Medieneinstellungen nach Bedarf anpassen.

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

Hier ist das Hintergrundbild, das in Ihrer in Browsern verwendeten css-Hauptdatei aufgerufen wird.

.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

Ihr Druck-Hack, der von Browsern verwendet wird, wenn Benutzer den Druckdialog starten. So können Sie die Druckklasse zu Ihrem div hinzufügen und ausdrucken oder bei Bedarf entfernen.

.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

Hinweis: Sie können auch die @ media-Regel verwenden, anstatt Dateien zu importieren, wenn Sie vermeiden möchten, eine zusätzliche http-Anfrage zu erstellen.

referenz aus: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

3
Dexter

Versuche dies:

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}
1
ashkufaraz

Wenn Sie den Internet Explorer verwenden, gehen Sie folgendermaßen vor:

  • Gehen Sie zum Menü "Tools".
  • Klicken Sie auf "Internetoptionen".
  • Klicken Sie auf die Registerkarte "Erweitert".
  • Überprüfen Sie die Hintergrundfarbe und die Bilder des Drucks.
0
kriti
<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

Dies macht Sinn für das von Ihnen gepostete CSS, siehe auch diese Website: https://defuse.ca/force-print-background.htm

0
Nasim Bahar

set media = "print"

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Referenz

0
diEcho