Cambiare un'immagine in testo tramite CSS per la stampa?

Question

Diciamo che ho un banner di intestazione su una pagina web che sto per stampare. Invece di sprecare l'inchiostro di qualcuno che stampa l'intero blocco dell'immagine, c'è un modo tramite css per sostituire l'immagine con testo di dimensione H1?

Answer 1

È possibile inserire un elemento h1 e un'immagine nella stessa posizione nell'origine e avere l'immagine CSS visualizzata: nessuna per i supporti di stampa e avere < code> h1 impostato su display: none per i media dello schermo.

Answer 2

Di solito aggiungo solo quanto segue al mio foglio di stile:

.nodisplay
{
    display: none;
}

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

E quindi assegnare la classe noprint agli elementi che non devono essere stampati:

<div class="noprint">

</div>

E per il tuo esempio, dovrebbe funzionare qualcosa di simile al seguente:

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

Answer 3

Bryan, in genere su cose come i loghi uso comunque la sostituzione delle immagini per la grafica, quindi il logo stesso è davvero in un tag H1. Quindi nel mio foglio di stile di stampa. Faccio qualcosa del genere ...

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;
}

Che rimuove la sostituzione dell'immagine e mostra il testo. Assicurati ovviamente di chiamare questo foglio di stile separatamente usando media = " print " .

Answer 4

Aggiunta alla soluzione di Adam: se il tuo testo è fisso ("banner principale era lì" e non "annuncio per tale e tale era lì"), puoi usare : prima o: dopo gli pseudo-elementi per inserire il testo anziché avere il testo pre-inserito nel codice HTML.

Renderò il tuo HTML più leggero se stai sostituendo molte immagini con lo stesso testo.

Devo dire che non mi piace questa funzione CSS, ma è lì se vuoi usarla.