Comment puis-je remplacer du texte HTML par une image à l'aide de CSS ?

Remplacer le texte HTML par une image à l'aide de CSS

En HTML, il est courant d'utiliser des balises pour créer des titres et afficher du texte dans un site Web. page. Cependant, il existe des scénarios dans lesquels vous souhaiterez peut-être remplacer le texte par une image. Cet article relève ce défi en explorant deux solutions CSS efficaces pour masquer le texte et afficher une image à la place.

Solution 1 : pousser le texte hors de l'écran

Cette méthode implique l'indentation le texte à une distance significative de l'écran, le rendant effectivement invisible pour les utilisateurs. Simultanément, une image d'arrière-plan est appliquée à la balise pour afficher l'image souhaitée.

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 */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Solution 2 : Masquer le texte avec débordement

Cette approche utilise une combinaison de l'indentation du texte, le contrôle des espaces et le débordement pour masquer le texte.

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

En implémentant l'une ou l'autre de ces solutions, vous pouvez masquez efficacement le texte dans la balise HTML et affichez l'image souhaitée à la place.

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!