Texte invisible à l'aide de CSS

Masquer des éléments de texte à l'aide de CSS peut être utile à diverses fins de conception. Un scénario courant consiste à remplacer le texte par une image comme logo. Cet article aborde un problème spécifique : comment supprimer efficacement le texte d'origine lors de l'affichage de l'image.

Solutions pour masquer le texte

Il existe plusieurs approches pour rendre le texte invisible lors de l'affichage de l'image. en préservant les dimensions de l'élément pour le placement de l'image.

Méthode 1 : Indentation du texte

Une technique consiste à pousser le texte hors de l'écran en utilisant text-indent :

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

Méthode 2 : masquage du texte

Une autre solution évite la grande boîte invisible créée par l'indentation négative :

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Les deux méthodes obtiennent le résultat souhaité en poussant le texte hors de l'écran ou en le masquant dans l'élément.