Heim > Web-Frontend > HTML-Tutorial > So verbergen Sie den Textinhalt eines Bildhintergrunds mithilfe von CSS

So verbergen Sie den Textinhalt eines Bildhintergrunds mithilfe von CSS

php中世界最好的语言
Freigeben: 2017-11-28 10:40:54
Original
4606 Leute haben es durchsucht

In diesem Fall verwenden wir CSS, um den Textinhalt des Bildhintergrunds auszublenden. Zuerst verwenden wir den Hintergrund Hintergrund, um das Bild als Hintergrundanzeige festzulegen 🎜> Der Einzug dient dazu, den Link-Inhalt auszublenden und der Link-Tag dient dazu, den Ankertext-Link auf den Text zu setzen. Nachfolgend finden Sie Beispiele. Beispielfallbeschreibung

Hier ist es praktisch, den CSS-DIV-Falleffekt zu beobachten. Lassen Sie uns das Layout der Website implementieren.

Erweiterte Lektüre: HTML-Bild

1. CSS-Code:

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}
Nach dem Login kopieren

/* CSS-Kommentar: display:block is #logo The Das innere A-Tag wird in Blöcken angezeigt und mit 100 % Höhe und 100 % Breite angezeigt. Dieses Attribut ist der CSS-Einrückungsstil. Wir setzen es auf einen negativen Wert von 9999 Pixel, wodurch das innere A ausgeblendet wird Tag. Text

Auf diese Weise wird das h1-Tag-Hintergrundbild angezeigt, der Text ausgeblendet und der A-Ankertext realisiert

Hyperlink

*/ 2, HTML-Code:

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage