Heim > Artikel > Web-Frontend > So verbergen Sie Hyperlink-Text im CSS-Code
So verbergen Sie Hyperlink-Text im CSS-Code
- 云罗郡主nach vorne
- 2018-11-22 17:19:393875Durchsuche
Der Inhalt dieses Artikels befasst sich mit dem Ausblenden des CSS-Codes im Hyperlink-Text. Ich hoffe, dass er für Sie hilfreich ist.
Verstecken Sie den Text im Hyperlink und verwenden Sie die CSS-Layout-Methode
Manchmal wird beim Div-CSS-Webseitenlayout ein Tag für den Hyperlink verwendet, aber der Text muss ausgeblendet werden, aber der Hyperlink wird nicht ungültig. Wenn Sie beispielsweise einen Hyperlink zu einem Bild oder Symbol erstellen möchten, verwenden Sie das Bild oder Symbol als Hintergrundbild. Sie möchten jedoch nicht, dass der Text angezeigt wird. Wenn der Hyperlink vorhanden ist, kann darauf geklickt werden , und das Bild ist ebenfalls sichtbar. In diesem Fall ist der Hyperlinktext ausgeblendet.
Verwenden Sie CSS-Attributwörter: text-indent
Text-Indent-Einführung:
Textinhalt-Einrückungsattribut, das häufig zum Einrücken von zwei Zeichen am Anfang eines Absatzes verwendet wird Wenn Sie beispielsweise jeden Absatz eines Artikels um zwei chinesische Zeichen einrücken möchten, legen Sie einfach text-indent fest.
Zum Ausblenden können Sie auch text-indent verwenden, um dies zu erreichen. Legen Sie beispielsweise text-indent:-999px oder text-indent:-9999px fest, um den Text im Objekt um 9999px nach vorne einzurücken Versteckeffekt.
Hyperlinks mit Text-versteckten CSS-Layout-Fällen sind wie folgt:
1. Fallcode
<!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>
Legen Sie eine Klasse fest= Legen Sie im Feld „Logo“ das Logo der thinkcss-Website als Hintergrundbild fest und legen Sie die Breite und Höhe fest.
Stellen Sie zunächst die CSS-Breite, die CSS-Höhe und das Logobild als Hintergrund im „.logo“-Selektor ein.
Stellen Sie dann den Hyperlink a im class=logo-Objekt ein Bilden Sie einen Block (lassen Sie für den Hyperlink eine Breite und Höhe wirksam), legen Sie die Breite und Höhe fest und legen Sie text-indent:-9999px fest, um den Text im Hyperlink auszublenden. Natürlich wird der Text ausgeblendet, die Hyperlinks und Hintergrundbilder bleiben jedoch erhalten.
Das Obige ist die vollständige Einführung zum Ausblenden des CSS-Codes im Hyperlink-Text. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonSo verbergen Sie Hyperlink-Text im CSS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!