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