Comment masquer efficacement du texte lors de l'affichage d'une image à l'aide de CSS ?

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 original 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 à l'aide de l'indentation du texte :

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 de 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é soit pousser le texte hors de l'écran ou le cacher dans l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!