Ayant vu de nombreuses techniques pour remplacer un texte par une image en CSS, je me permets de partager la mienne, qui ne m’a jamais fait défaut, avec les explications adéquates.

<h3 class="irh3">Mon texte alternatif</h3>
.irh3 {
	display : inline-block;
	width : 100px;
	height : 30px;
	overflow : hidden;
	text-align : left;
	text-indent : -9999px;
	white-space : nowrap;
	background : transparent url(http://lorempixel.com/100/50/) no-repeat top left;
}

Exemple :

Mon texte alternatif

Explications :

  • On commence par définir un type inline-block sur l’élément. Le display:block fonctionne aussi, mais j’ai plus souvent besoin du display:inline-block;.
  • On lui donne la taille de l’image interne, qu’on dispose en background.
  • Le text-indent va décaler le texte loin sur la gauche (ce dont on s’assure avec le text-align:left;), le white-space:nowrap; s’assurant qu’il soit sans retour à la ligne.
  • Le overflow:hidden évite que le texte soit éventuellement visible sur la gauche, s’il est trop long.

Je suis conscient que cette technique est assez lourde, mais elle a l’avantage de ne jamais m’avoir lâché : )

Tags : , , ,