So verbergen Sie den Textinhalt eines Bildhintergrunds mithilfe von CSS

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 3499910bf9dac5ae3c52d5ede7383485 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}

/* 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:

73039535c00d43b2fbeb0ebca2d53fc0

<h1 id="logo"> 
<a href="http://www.php.cn/" title="PHP中文网"> 
</a> 
</h1>

Falleffekt Die Ergebnisse werden im Browser angezeigt. Sie können dem Beispielcode folgen, um über die DIV+CSS-Praxis nachzudenken und sie im Browser zu testen.

Wichtige Erklärung: Ursprünglich wurde der Textinhalt im h1-Tag in HTML festgelegt, aber durch das Festlegen des Stils „text-indent:-9999px“ wird der Text im Wesentlichen um einen Abstand von 9999px nach links verschoben, was natürlich ist auf einem Display mit normaler Auflösung angezeigt. Der 9999px-Randinhalt ist nicht zu sehen. Natürlich wird diese CSS-Technik verwendet, um den Text auszublenden und gleichzeitig das Hintergrundbild normal anzuzeigen.

Zusammenfassung

Wir verwenden das Bild als

CSS-Hintergrund

, fügen Text darauf ein und verbergen den Text. Dies ist praktischer für SEO. Achten Sie jedoch im tatsächlichen Betrieb auf die Größe, Höhe und Breite des Bildes. Achten Sie beim Festlegen des Objekt-DIV-Felds auf die entsprechende Höhe und Breite und verwenden Sie CSS-Hintergrundstil, Texteinzug, CSS-Anzeige und andere Stilwörter um es zu erreichen. Sie können es durch Übung anhand von Fällen und mehreren Beispielen erlernen. Wenn Sie den A-Ankertext nicht verwenden möchten, um den Text im Bild auszublenden, können Sie das a-Tag durch ein span-Tag, div-Tag oder em-Tag ersetzen, was den gleichen Effekt hat.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Was sind js Deep Copy und Shallow Copy und wie werden sie implementiert?

Detaillierte Erklärung des Front-End-Responsive-Layouts, der Responsive-Bilder und des selbst erstellten Rastersystems

a: Lösung für den ungültigen Klick der aktiven Plus-Animation

Das obige ist der detaillierte Inhalt vonSo verbergen Sie den Textinhalt eines Bildhintergrunds mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!