Comment puis-je masquer efficacement du texte en HTML à l'aide de CSS lors de l'affichage d'une image ?

Masquer le texte à l'aide de CSS

En HTML, une balise peut être stylisée à l'aide de CSS pour remplacer son texte par une image. Cependant, le texte original peut toujours être visible dans l'espace alloué à la balise.

Pour résoudre ce problème, une technique consiste à pousser le texte hors de l'écran. Ceci peut être réalisé avec la propriété CSS suivante :

text-indent: -9999px;

Cela envoie le texte loin vers la gauche, le rendant invisible. De plus, pour afficher l'image, définissez la propriété background-image et spécifiez son URL. N'oubliez pas de définir la hauteur et la largeur de l'élément pour accueillir l'image.

background-image: url(/the_img.png);
height: 100px;
width: 600px;

Une méthode alternative consiste à masquer le texte tout en évitant la création d'un grand espace hors écran :

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

En définissant text-indent sur 100 %, le texte est effectivement décalé vers la droite de sa propre largeur, le rendant invisible. espace blanc : nowrap empêche le texte de passer à la ligne suivante, et overflow : les clips masqués tout contenu excédentaire.

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!