Welche Methoden gibt es, Elemente in CSS auszublenden? Einführung in vier gängige Methoden zum Ausblenden von Elementen in CSS

Im Prozess der Webentwicklung müssen wir häufig bestimmte Elemente ausblenden und bei Bedarf anzeigen. Welche Methoden gibt es also, um Elemente in CSS auszublenden? In diesem Artikel erfahren Sie, wie Sie Elemente in CSS ausblenden.

Es gibt viele Möglichkeiten, Seitenelemente mithilfe von CSS auszublenden. Sie können die Deckkraft auf 0, die Sichtbarkeit auf „Ausgeblendet“, die Anzeige auf „Keine“ oder die Position auf „Absolut“ setzen und dann die Position auf den unsichtbaren Bereich usw. festlegen. Schauen wir uns den spezifischen Inhalt dieser CSS-Attribute zum Ausblenden von Seitenelementen genauer an.

Methode 1 zum Ausblenden von Elementen in CSS: Verwenden Sie das Opazitätsattribut

Das Opazitätsattribut bedeutet, die Opazität des Objekts abzurufen oder festzulegen, wenn seine Transparenz 0 ist. das Visuelle Es ist verschwunden, nimmt aber immer noch diese Position ein und spielt eine Rolle im Layout der Webseite. 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, zum Beispiel: filter:Alpha(opacity=50).

CSS-Methode für versteckte Elemente: Verwenden Sie das Anzeigeattribut

Das Anzeigeattribut ist das tatsächliche versteckte Element. Wenn das Anzeigeattribut des Elements keins ist, wird das Element angezeigt wird aus dem Blickfeld verschwinden und nicht einmal das Boxmodell wird keine Position auf der Seite einnehmen. Darüber hinaus verschwinden auch seine untergeordneten Elemente zusammen aus dem Boxmodell.

.hide {
   display: none;
}

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

CSS-Methode für versteckte Elemente: Verwenden Sie das Sichtbarkeitsattribut

Das Sichtbarkeitsattribut ähnelt dem Deckkraftattribut. Wenn der Attributwert ausgeblendet ist, wird das Element ausgeblendet wird besetzen Es steuert seine eigene Position und beeinflusst das Layout der Webseite. Der einzige Unterschied zur Deckkraft besteht darin, dass es 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.

Methode 4 zum Ausblenden von Elementen in CSS: Verwenden Sie das Positionsattribut

Die Bedeutung des Positionsattributs besteht darin, das Element aus dem Dokumentfluss und aus dem Dokumentfluss zu verschieben Das Hinzufügen dieses Attributs hat keinen Einfluss auf das Layout, während die Elemente bedienbar bleiben. Nach der Anwendung dieses Attributs können Sie hauptsächlich die Richtung (oben, links, rechts, unten) steuern, um einen bestimmten Wert zu erreichen und die aktuelle Seite zu verlassen.

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Hinweis: Vermeiden Sie die Verwendung dieser Methode, um fokussierbare Elemente auszublenden, da dies zu einem Fehler „Nicht verfügbar“ führt, wenn der Benutzer diesem Element den Fokusschalter gibt. Diese Methode wird häufig beim Erstellen benutzerdefinierter Kontrollkästchen und Optionsfelder verwendet.

Abschließend: Weitere Informationen zu den oben genannten vier Attributen Deckkraft, Anzeige, Sichtbarkeit und Position finden Sie im CSS-Handbuch.

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, Elemente in CSS auszublenden? Einführung in vier gängige Methoden zum Ausblenden von Elementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!