Heim  >  Artikel  >  Web-Frontend  >  So verbergen Sie Text in CSS

So verbergen Sie Text in CSS

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-15 18:34:203482Durchsuche

Methoden zum Ausblenden von Text: 1. Verwenden Sie das Anzeigeattribut, die Syntax „display:none;“; 2. Verwenden Sie das Sichtbarkeitsattribut, die Syntax „visibility:hidden;“; :0;".

So verbergen Sie Text in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1. Verwenden Sie das Anzeigeattribut
Das Anzeigeattribut ist im wahrsten Sinne des Wortes ein verstecktes Element. Wenn das Anzeigeattribut eines Elements keins ist, verschwindet das Element aus der Vision und nicht einmal das Boxmodell wird generiert Außerdem wird es keine Position auf der Seite einnehmen, auch seine untergeordneten Elemente verschwinden zusammen aus dem Boxmodell.

.hide {
   display: none;
}

Hinweis: Alle hinzugefügten Animationseffekte und Interaktionen und seine untergeordneten Elemente funktionieren nicht.

2, Verwenden Sie das Sichtbarkeitsattribut.
Das Sichtbarkeitsattribut ähnelt dem Deckkraftattribut. Wenn der Attributwert ausgeblendet ist, wird das Element ausgeblendet, nimmt seine eigene Position ein und spielt eine Rolle im Layout Die Webseite ähnelt der Opazität. Der einzige Unterschied besteht darin, dass sie nicht auf Benutzerinteraktionen reagiert. Darüber hinaus werden Elemente in der Bildschirmlesesoftware ausgeblendet.

.hide {
   visibility: hidden;
}

Hinweis: Dieses Attribut kann auch Animationseffekte erzielen, solange sein Anfangs- und Endzustand unterschiedlich sind. Dadurch wird sichergestellt, dass Übergangsanimationen zwischen Sichtbarkeitsstatuswechseln zeitlich reibungslos erfolgen können.

3. Verwenden Sie das Opazitätsattribut
Das Opazitätsattribut bedeutet, die Opazität des Objekts abzurufen oder festzulegen. Wenn seine Transparenz 0 ist, verschwindet es optisch, nimmt jedoch weiterhin diese Position ein und wirkt sich auf das Layout der Webseite aus . Es reagiert auch auf Benutzerinteraktionen. Bei Elementen mit hinzugefügtem Deckkraftattribut ändern sich auch der Hintergrund und der Elementinhalt entsprechend.

.hide {
  opacity: 0;
}

Erläuterung: Wir können das Opazitätsattribut verwenden, um einige großartige Animationseffekte zu erzielen.
Hinweis: Dieses Attribut ist mit den Browsern IE9 und höher kompatibel. IE8 und frühere Versionen unterstützen alternative Filterattribute, wie zum Beispiel: filter:Alpha(opacity=50).

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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