Maison > Article > interface Web > Comment masquer le texte du lien hypertexte du code CSS
Comment masquer le texte du lien hypertexte du code CSS
- 云罗郡主avant
- 2018-11-22 17:19:393829parcourir
Le contenu de cet article explique comment masquer le code CSS dans le texte du lien hypertexte. Il a une certaine valeur de référence. J'espère que cela vous sera utile.
Masquer le texte dans le lien hypertexte et utiliser la méthode de mise en page technique CSS
Parfois, lors de la mise en page d'une page Web CSS div, le lien hypertexte d'une balise est utilisé, mais le texte doit être masqué, mais le lien hypertexte ne devient pas invalide. Par exemple, pour un lien hypertexte vers une image ou une icône, utilisez l'image ou l'icône comme image d'arrière-plan. Utilisez le lien hypertexte a pour ajouter du texte, mais vous ne souhaitez pas que le texte soit affiché. Si le lien hypertexte existe, vous pouvez cliquer dessus. , et l'image est également visible. Dans ce cas, le texte du lien hypertexte est masqué.
Utilisez les mots d'attribut CSS : text-indent
text-indent introduction :
Attribut d'indentation du contenu du texte, couramment utilisé pour mettre en retrait deux caractères au début d'un paragraphe. Par exemple, si vous indentez chaque paragraphe d'un article de deux caractères chinois, définissez simplement text-indent.
Pour masquer, vous pouvez également utiliser text-indent pour y parvenir. Par exemple, définissez text-indent:-999px ou text-indent:-9999px pour indenter le texte de l'objet de 9999px pour obtenir l'objectif. effet masquant.
Les hyperliens avec les cas de mise en page CSS masqués par le texte sont les suivants :
1. Code de cas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接存在文字隐藏 在线演示</title>
<style>
.logo{ margin:0 auto;width:175px; height:51px;
background:url(phplogo.gif) no-repeat 0 0}
.logo a{ display:block; width:100%; height:100%; text-indent:-9999px}
</style>
</head>
<body>
<div class="logo"><a href="http://www.php.cn/">php中文网</a></div>
</body>
</html>
Définir un. class = logo, définissez le logo du site Web thinkcss comme image d'arrière-plan et définissez la largeur et la hauteur.
Tout d'abord, définissez la largeur CSS, la hauteur CSS et l'image du logo comme arrière-plan dans le sélecteur ".logo"
Définissez ensuite le lien hypertexte a dans l'objet class=logo ; pour former un bloc (laissez Hyperlink une largeur et une hauteur prendre effet), définissez la largeur et la hauteur, puis définissez text-indent:-9999px pour masquer le texte dans le lien hypertexte. Bien entendu, le texte est masqué, mais les hyperliens et les images d’arrière-plan sont conservés.
Ce qui précède est l'introduction complète sur la façon de masquer le code CSS dans le texte du lien hypertexte. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention au site Web PHP chinois.
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!