Unsichtbarer Text mit CSS

Das Ausblenden von Textelementen mit CSS kann für verschiedene Designzwecke nützlich sein. Ein häufiges Szenario ist das Ersetzen von Text durch ein Bild als Logo. Dieser Artikel befasst sich mit einem spezifischen Problem: Wie kann der Originaltext beim Anzeigen des Bilds effektiv entfernt werden? Dabei bleiben die Abmessungen des Elements für die Bildplatzierung erhalten.

Methode 1: Texteinrückung

Eine Technik besteht darin, den Text mithilfe von text-indent vom Bildschirm zu verschieben:

h1 { Texteinzug: -9999px; /* sendet den Text außerhalb des Bildschirms */ Hintergrundbild: url(/the_img.png); /* zeigt Bild */ Höhe: 100px; /* stellen Sie sicher, dass Sie die Höhe & Breite */ Breite: 600px; Leerraum: nowrap; /* weil nur die erste Zeile eingerückt ist */ }

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 { Hintergrundbild: url(/the_img.png); /* zeigt Bild */ Höhe: 100px; /* stellen Sie sicher, dass Sie die Höhe & Breite */ Breite: 600px; /* Den Text ausblenden. */ Texteinzug: 100 %; Leerraum: nowrap; Überlauf: versteckt; }Beide Methoden erzielen das gewünschte Ergebnis, indem sie den Text entweder aus dem Bildschirm schieben oder ihn innerhalb des Elements verstecken.