简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

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

php中世界最好的语言
Libérer： 2017-11-28 10:40:54
original
4456 Les gens l'ont consulté

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(//m.sbmmt.com) no-repeat 0 0}
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}
Copier après la connexion

/* 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="//m.sbmmt.com/" title="PHP中文网"> 
</a> 
</h1>
Copier après la connexion