Masquer le texte à l'aide de css

Question

J'ai une balise dans mon html comme ceci:

<h1>My Website Title Here</h1>

À l'aide de css je veux remplacer le texte avec mon logo actuel. J'ai le logo il n'y pas de problème via le redimensionnement de la balise et de mettre une image d'arrière-plan via css. Cependant, je ne peux pas comprendre comment se débarrasser du texte. Je l'ai vu faire avant que, fondamentalement, en poussant le texte en dehors de l'écran. Le problème est que je ne me souviens pas où je l'ai vu.

Answer 1

C'est une façon:

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

Voici une autre façon de cacher le texte, tout en évitant l'énorme 9999 pixels que le navigateur va créer:

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

Answer 2

Pourquoi ne pas simplement utiliser:

h1 { color: transparent; }

Answer 3

Quand j'ai besoin de cacher seulement le texte, mais de laisser le fond de la touche d'entrée, tout simplement utilisé:

.myElement { font-size:0; }

Answer 4

la plupart des navigateurs façon est d'écrire le html

<h1><span>Website Title</span></h1>

puis utiliser les CSS pour masquer la plage et de remplacer l'image

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

si vous pouvez utiliser les CSS 2, alors il ya quelques meilleures façons à l'aide de l' content de la propriété. mais malheureusement, le web n'est pas à 100% encore là.

Answer 5

Voir mezzoblue pour un bon résumé de chaque technique, avec les forces et les faiblesses, en plus de html et css.