Wer alle Hintergrundgrafiken – also auch Logos oder Icons – als background im CSS abspeichert, erhalt beim Ausdruck eine recht farblose Seite. Denn die meisten Browser sind so voreingestellt, dass sämtliche Hintergrundfarben und –bilder nicht mitgedruckt werden. Doch mit einem CSS-Trick kann man dafür sorgen, dass z.B. Logos dennoch mitgedruckt werden.
Beispiel für screen.css und print.css
screen.css
.logo {
background: url(img/logo.gif);
}
print.css
.logo:after {
content: url(img/logo-print.gif);
}
Das Pseudoelement :after sorgt dafür, dass hinter dem div mit der Klasse „logo“ das Bild logo-print.gif eingefügt wird. Zwar lässt sich hier kein repeat, position oder ähnliches eingeben, wie es bei Hintergrundbildern möglich ist, allerdings wird das Logo so mit ausgedruckt, da es hier keine Hintergrundgrafik mehr ist.
Loading ...
Kommentare zu diesem Beitrag
Noch keine Kommentare vorhanden. Schreib Du den ersten :-)
Kommentare? Gerne!