Wie kann ich Text in HTML mithilfe von CSS beim Anzeigen eines Bilds effektiv ausblenden?

Text mit CSS ausblenden

In HTML kann ein Tag mit CSS gestaltet werden, um seinen Text durch ein Bild zu ersetzen. Allerdings ist der Originaltext möglicherweise immer noch innerhalb des dem Tag zugewiesenen Platzes sichtbar.

Um dieses Problem zu beheben, besteht eine Technik darin, den Text vom Bildschirm zu verschieben. Dies kann mit der folgenden CSS-Eigenschaft erreicht werden:

text-indent: -9999px;

Dadurch wird der Text weit nach links verschoben und somit unsichtbar gemacht. Um das Bild anzuzeigen, legen Sie außerdem die Eigenschaft „Hintergrundbild“ fest und geben die URL an. Vergessen Sie nicht, die Höhe und Breite des Elements zu definieren, um das Bild unterzubringen.

background-image: url(/the_img.png);
height: 100px;
width: 600px;

Eine alternative Methode besteht darin, den Text auszublenden und gleichzeitig die Schaffung eines großen Raums außerhalb des Bildschirms zu vermeiden:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Durch die Einstellung von text-indent auf 100 % wird der Text effektiv um seine eigene Breite nach rechts verschoben, sodass er unsichtbar wird. White-Space: Nowrap verhindert, dass der Text in die nächste Zeile umgebrochen wird, und Overflow: Hidden schneidet überschüssigen Inhalt ab.

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