Comment masquer le contenu textuel d'un arrière-plan d'image à l'aide de CSS

Ce cas montre comment utiliser CSS pour masquer le contenu du texte de l'arrière-plan de l'image. Nous utilisons d'abord l'arrière-plan background pour définir l'image comme affichage d'arrière-plan, puis utilisons text-indent Le retrait sert à masquer le contenu d'un lien et la balise de lien 3499910bf9dac5ae3c52d5ede7383485 sert à définir le lien du texte d'ancrage vers le texte. Vous trouverez ci-dessous des exemples.

Exemple de description de cas

Ici, il est pratique d'observer l'effet du cas CSS DIV, implémentons la mise en page du site Web.

Lecture approfondie : html img image

1. Code CSS :

h1#logo{ 
float:left;width:165px;height:60px; 
background:url(http://www.php.cn) no-repeat 0 0}
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}

/* commentaire css : display:block est #logo Le La balise inner A est affichée en blocs et affichée avec 100 % de hauteur et 100 % de largeur

text-indent Cet attribut est le style d'indentation CSS Nous le définissons sur une valeur négative de 9999px, qui masque le A interne. tag. Texte

De cette façon, l'image de fond de la balise h1 est affichée, le texte est masqué et le texte d'ancrage A est réalisé

Lien hypertexte

*/

2, code HTML :

<h1 id="logo"> 
<a href="http://www.php.cn/" title="PHP中文网"> 
</a> 
</h1>

449a1e5c76b0c18f465ea544fdeb2616 Effet de cas

Les résultats sont affichés dans le navigateur. Vous pouvez suivre l'exemple de code pour réfléchir et compléter la pratique DIV+CSS, et la tester dans le navigateur.

Explication importante : à l'origine, le contenu du texte était défini dans la balise h1 en HTML, mais la définition du style "text-indent:-9999px" déplace essentiellement le texte vers la gauche d'une distance de 9999px, ce qui est naturellement affiché sur un écran à résolution normale Le contenu du bord de 9999px n'est pas visible. Naturellement, cette technique CSS est utilisée pour masquer le texte et en même temps, l'image d'arrière-plan s'affiche normalement.

Résumé

Nous utilisons l'image comme

arrière-plan CSS, mettons du texte dessus et masquons le texte. C'est plus pratique pour le référencement. Mais en fonctionnement réel, faites attention à la taille, à la hauteur et à la largeur de l'image lors de la définition de la zone DIV de l'objet, faites attention à la hauteur et à la largeur appropriées et utilisez le style d'arrière-plan CSS, l'indentation du texte, l'affichage CSS et d'autres mots de style. pour y parvenir. Vous pouvez l'apprendre par la pratique basée sur des cas et de multiples exemples. Si vous ne souhaitez pas utiliser le texte d'ancrage A pour masquer le texte sur l'image, vous pouvez remplacer la balise a par une balise span, une balise div ou une balise em, qui auront le même effet.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Qu'est-ce que la copie profonde et la copie superficielle js et comment les implémenter

Explication détaillée de la mise en page réactive frontale, des images réactives et du système de grille créé par vous-même

a : Solution au clic invalide de l'animation active plus

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!