Changer une image en texte via CSS pour l’impression?

Question

Disons que j'ai une bannière en-tête sur une page Web que je m'apprête à imprimer. Au lieu de gaspiller l’encre de quelqu'un en imprimant tout le bloc de l'image, existe-t-il un moyen de remplacer l'image par du texte de taille H1?

Answer 1

Vous pouvez placer un élément h1 et une image au même endroit de la source et afficher CSS de l'image: aucun pour le support d'impression, ainsi que < code> h1 défini sur display: aucun pour le support d'écran.

Answer 2

D'habitude, j'ajoute simplement ce qui suit à ma feuille de style:

.nodisplay
{
    display: none;
}

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

Attribuez ensuite la classe noprint à des éléments qui ne doivent pas être imprimés:

<div class="noprint">

</div>

Et pour votre exemple, les éléments suivants devraient fonctionner:

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

Answer 3

Bryan, généralement sur des éléments tels que les logos, le remplacement de l'image est de toute façon utilisé, de sorte que le logo lui-même figure réellement dans une balise H1. Puis dans ma feuille de style d'impression. Je fais quelque chose comme ça ...

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

Qui supprime le remplacement d'image et affiche le texte. Assurez-vous bien que vous appeliez cette feuille de style séparément à l’aide de media = " print " .

.

Answer 4

Ajout à la solution d'Adam: Si votre texte est corrigé ("la bannière principale était là" et non "une annonce pour telle ou telle était là"), vous pouvez utiliser : before ou: after pseudo-éléments pour insérer du texte au lieu d'avoir le texte pré-inséré dans le code HTML.

I rend votre code HTML plus léger si vous remplacez plusieurs images par le même texte.

Je dois dire que je n'aime pas cette fonctionnalité CSS, mais elle existe si vous souhaitez l'utiliser.