Wie kann man Text beim Anzeigen eines Bildes mithilfe von CSS effektiv ausblenden?

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 man den Originaltext effektiv entfernt, während das Bild angezeigt wird.

Lösungen zum Ausblenden von Text

Es gibt mehrere Ansätze, um Text während der Anzeige unsichtbar zu machen Beibehaltung der Abmessungen des Elements für die Bildplatzierung.

Methode 1: Text Einrückung

Eine Technik besteht darin, den Text mithilfe von text-indent aus dem Bildschirm zu schieben:

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

Methode 2: Text ausblenden

Eine andere Lösung vermeidet die große unsichtbare Box, die durch eine negative Einrückung entsteht:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Beide Methoden erreichen das gewünschte Ergebnis, indem Sie den Text entweder aus dem Bildschirm schieben oder ihn innerhalb des Elements verstecken.

Das obige ist der detaillierte Inhalt vonWie kann man Text beim Anzeigen eines Bildes mithilfe von CSS effektiv ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!