Masquer le texte à l'aide de css

J'ai une balise dans mon html comme ceci :

<h1>My Website Title Here</h1>

En utilisant les css, je veux remplacer le texte par mon logo actuel. J'ai réussi à placer le logo sans problème en redimensionnant la balise et en ajoutant une image d'arrière-plan via css. Cependant, je n&#8217arrive pas à trouver comment me débarrasser du texte. J'ai déjà vu comment faire, en repoussant le texte hors de l'écran. Le problème est que je ne me souviens pas où j'ai vu cela.

La méthode la plus conviviale pour les navigateurs est d'écrire le HTML comme suit

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

puis d'utiliser le CSS pour masquer le span et remplacer l'image.

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

Si vous pouvez utiliser CSS2, il existe de meilleurs moyens d'utiliser la propriété content, mais malheureusement le web n'est pas encore à 100%.

Commentaires (4)

vous pouvez utiliser la propriété css background-image et z-index pour vous assurer que l'image reste devant le texte.

Commentaires (0)

La réponse est de créer un span avec la propriété

{display:none;}

Vous trouverez un exemple sur [ce site][1].

[1] : http://stopdesign.com/articles/replace_text/

Commentaires (1)