Ein Bild per CSS für den Druck in Text umwandeln?

Question

Nehmen wir an, ich habe ein Kopfbanner auf einer Webseite, die ich drucken möchte. Anstatt jemandes Tinte zu verschwenden, den gesamten Block des Bildes zu drucken, gibt es eine Möglichkeit, über CSS das Bild mit Text der Größe H1 zu ersetzen?

Answer 1

Normalerweise füge ich meiner Formatvorlage einfach Folgendes hinzu:

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

Und weisen Sie dann die noprint Klasse auf Elemente, die nicht gedruckt werden sollen:

<div class="noprint">

</div>

Und für Ihr Beispiel sollte etwas wie das Folgende funktionieren:

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>

Answer 2

Sie könnten eine h1 Element und ein Bild an der gleichen Stelle im Quelltext zu platzieren, und das Bild mit CSS display:none für Printmedien, und haben die h1 eingestellt auf display:none für Bildschirmmedien.

Answer 3

Bryan, typischerweise verwende ich bei Dingen wie Logos ohnehin Bildersatz für die Grafik, so dass das Logo selbst wirklich in einem H1-Tag steht. Dann in meiner Druckvorlage. Ich tue etwas wie dieses...

h1#logo a, h1#home-logo{
    text-indent: 0 !important;
    background-image: none !important;
    font-size: 1.2em !important;
    display: block !important;
    height: 1em !important;
    width: 100% !important;
    text-decoration: none !important;
    color: black !important;
}

Dadurch wird die Bildersetzung entfernt und der Text angezeigt. Stellen Sie natürlich sicher, dass Sie dieses Stylesheet separat aufrufen mit media="print" .

Answer 4

Ergänzend zu Adams Lösung: Wenn Ihr Text fixiert ist ("Hauptbanner war da" und nicht "Werbung für dies und das war da"), können Sie Folgendes verwenden :vor oder :nach Pseudo-Elementen um Text einzufügen, anstatt den Text vorher in den HTML-Code einzufügen.

Ich mache Ihr HTML leichter, wenn Sie viele Bilder durch denselben Text ersetzen.

Ich muss sagen, dass ich diese CSS-Funktion nicht mag, aber sie ist da, wenn man sie nutzen will.