¿Cambiar una imagen a texto vía CSS para imprimir?

Question

Digamos que tengo un encabezado en una página web que estoy a punto de imprimir. En lugar de desperdiciar la tinta de alguien imprimiendo el bloque completo de la imagen, ¿hay una manera a través de css de reemplazar la imagen con texto de tamaño H1?

Answer 1

Podría colocar un elemento h1 y una imagen en el mismo lugar en la fuente, y tener la imagen CSS en pantalla: ninguna para los medios impresos, y tener la < código> h1 configurado en mostrar: ninguno para medios de pantalla.

Answer 2

Por lo general, solo agrego lo siguiente a mi hoja de estilo:

.nodisplay
{
    display: none;
}

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

Y luego asigne la clase noprint a elementos que no deben imprimirse:

<div class="noprint">

</div>

Y para su ejemplo, algo como lo siguiente debería funcionar:

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

Answer 3

Bryan, por lo general en cosas como logotipos, de todos modos uso el reemplazo de imagen para el gráfico, por lo que el propio logotipo está realmente en una etiqueta H1. Luego en mi hoja de estilo de impresión. Hago algo como esto ...

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

Lo que elimina la sustitución de la imagen y muestra el texto. Por supuesto, asegúrese de llamar a esta hoja de estilo por separado utilizando media = " print " .

Answer 4

Agregando a la solución de Adam: si su texto está arreglado (" encabezado de la bandera no estaba '' no '' anuncio por tal y tal ''), puede usar : antes o: después de pseudo-elementos para insertar texto en lugar de tener el texto preinsertado en el HTML.

Aclaro su HTML si está reemplazando muchas imágenes con el mismo texto.

Tengo que decir que no me gusta esta característica de CSS, pero está ahí si quieres usarla.