So verbergen Sie HTML -Elemente in CSS

Es kann eine Situation geben, wenn Sie nicht möchten, dass einige Inhalte auf einer Webseite angezeigt werden. Zum Beispiel die Webseitenkomponenten wie die Navigationsleiste, die Kopfzeile, die Fußzeile und mehr. Darüber hinaus müssen wir beim Entwerfen eines bestimmten Abschnitts unserer Webanwendung manchmal einige der Komponenten verbergen. Für die entsprechenden Methoden gibt es viele Methoden, um HTML -Elemente mit CSS zu verbergen.

Das Ergebnis dieses Blogs ist:

• So verbergen Sie HTML -Elemente mit CSS?
• Methode 1: HTML -Elemente mit CSS „Anzeige: None“ ausblenden
• Methode 2: HTML -Elemente mit der „versteckten“ Eigenschaft ausblenden
• Methode 3: HTML -Elemente mit CSS „Sichtbarkeit: versteckt“ ausblenden
• Methode 4: HTML -Elemente mit CSS „Filter: Opazität (0)“ ausblenden
• Methode 5: HTML-Elemente ausblenden Sie mit CSS „Clip-Pfad: Circle (0)“ Eigenschaft
• Methode 6: HTML -Elemente ausblenden Sie mit CSS „Überlauf: Hidden“ Eigenschaft
• Methode 7: HTML -Elemente mit CSS „Depazität: 0“ ausblenden
• Methode 8: HTML -Elemente ausblenden Sie mit CSS „Transformation: Skala (0)“ Eigenschaft
• Methode 9: HTML -Elemente ausblenden, indem Sie Eigenschaften mit einem „transparenten“ Effekt anwenden

So verbergen Sie HTML -Elemente mit CSS?

Viele mögliche Methoden von CSS werden verwendet, um HTML -Elemente zu verbergen. Einige von ihnen sind unten aufgeführt:

• Anzeige: Keine
• Verstecktes Eigentum
• Sichtbarkeit: versteckt
• Filter: Deckkraft (0)
• Clip-Pfad-Eigenschaft
• Überlauf versteckt
• Deckkraft: 0
• Transformation: Skalierung (0)
• transparent
• Schriftgröße

Lassen Sie uns jede der oben genannten Methoden nacheinander ausarbeiten. Vorher erstellen wir jedoch eine HTML -Datei für die Demonstration.

Voraussetzung: HTML -Seite erstellen

In der HTML -Datei im Körperelement zuerst ein "ein" fügen Sie eine "hinzu"" Element. Im Inneren gibt es zwei Absatz -Tags, die jeweils der eindeutigen ID zugeordnet sindErste" Und "zweite", bzw:

Erster Paragraph!

Zweiter Absatz!

Methode 1: HTML -Elemente mit CSS „Anzeige: None“ ausblenden

Das CSS “Anzeige”Eigenschaft mit dem Wert“keinerEntfernt das Element und ermöglicht es anderen Elementen, seinen Platz einzunehmen. Zum Beispiel wollen wir den zweiten Absatz verbergen. Zu diesem Zweck wird die diskutierte CSS -Eigenschaft wie unten gezeigt angewendet:

#zweite
Anzeige: Keine;

• “#zweite”Bezieht sich auf die DIV mit dem zweiten ID.
• “Anzeige"Eigenschaft wird der Wert zugewiesen"keiner”:

Es ist zu sehen, dass jetzt der zweite Absatz versteckt ist:

Methode 2: HTML -Elemente mit der „versteckten“ Eigenschaft ausblenden

Eine andere Methode, um das HTML -Element zu verbergenversteckt”Attribut mit dem Element wie folgt:

Zweiter Absatz!

Es kann beobachtet werden, dass das erste Element versteckt ist:

Methode 3: HTML -Elemente mit CSS „Sichtbarkeit: versteckt“ ausblenden

Das CSS “SichtweiteEigenschaften können auch verwendet werden, um das Element so visuell zu verbergen, dass andere Elemente ihren Platz nicht einnehmen können. Im folgenden Beispiel das “Sichtweite"Eigenschaftswert wird als" festgelegt "versteckt”Für das erste HTML -Element:

#Erste
Sichtbarkeit: versteckt;

Die entsprechende Ausgabe ist aus dem untergegebenen Bild zu ersichtlich:

Methode 4: HTML -Elemente mit CSS „Filter: Opazität (0)“ ausblenden

Der Filter wendet Transparenz auf die Elemente an. Im Beispiel das “Filter”Eigenschaft wird als" Wert als "zugewiesen"Deckkraft (0)”, Was bedeutet, dass es auf der Webseite vollständig transparent ist:

#zweite
Filter: Deckkraft (0);

Auf dem folgenden Bildschirm können wir beobachten, dass der Absatz mit ID “zweite" ist versteckt:

Methode 5: HTML-Elemente ausblenden Sie mit CSS „Clip-Pfad: Circle (0)“ Eigenschaft

Die Clip-Pfad-Eigenschaft gibt an, welcher Teil der Webseite angezeigt werden soll.

Im folgenden Beispiel das “Clip-Pfad"Eigenschaft mit dem Wert"Kreis (0)”Zeigt an, dass kein Inhalt im Zusammenhang mit dem hinzugefügten Tag angezeigt wird:

#Erste
Clip-Pfad: Kreis (0);

Hier ist der Ausgangsbildschirm, der darstellt, dass das zweite Element angezeigt wird und der erste Absatz nicht sichtbar ist:

Methode 6: HTML -Elemente ausblenden Sie mit CSS „Überlauf: Hidden“ Eigenschaft

Der "Überlauf"Eigenschaft wird der Wert zugewiesen"versteckt”Um den Inhalt zu steuern. Infolgedessen wird der Fluss abgeschnitten und der verbleibende Inhalt ist versteckt:

#zweite
Höhe: 0px;
Breite: 0px;
Überlauf versteckt;

• Stellen Sie zunächst die Höhe und Breite der Div -ID als 0PX ein.
• Der Inhalt wird aus dem angegebenen Bereich überlaufen.
• Dann ist die "Überlauf"Eigenschaft wird der Wert zugewiesen"verstecktUm den Inhalt zu verbergen.

Aus der folgenden Ausgabe können wir sehen, dass das zweite Element nicht sichtbar ist:

Methode 7: HTML -Elemente mit CSS „Depazität: 0“ ausblenden

Die Opazitätsstufe ist die Transparenzstufe des Elements. Der "Opazität”Eigenschaft mit dem Wert“0”Bedeutet, dass das Element vollständig transparent ist:

#Erste
Deckkraft: 0;

Ausgang

Methode 8: HTML -Elemente ausblenden Sie mit CSS „Transformation: Skala (0)“ Eigenschaft

Der "Skala()Die Funktion ändert das Element horizontal und vertikal. Der Skala (0) -Wert der “verwandelnDie Eigenschaft gibt an, dass das Element auf Null dimensioniert ist, bedeutet, dass es versteckt ist:

#Erste
Transformation: Skala (0);

Ausgang

Methode 9: HTML -Elemente ausblenden, indem Sie Eigenschaften mit einem „transparenten“ Effekt anwenden

Lassen Sie uns das zweite Element vollständig transparent machen. Dafür zuweisen Sie die “Hintergrundfarbe" Und "Farbe”Eigenschaftswerte als“transparent”:

#zweite
Hintergrundfarbe: transparent;
Farbe: transparent;

Das zweite Element ist im Vergleich zum ersten vollständig transparent. Deshalb kann es auf dem Bildschirm nicht gesehen werden:

Wir haben einige der möglichen CSS -Methoden erklärt, um HTML -Elemente zu verbergen.

Abschluss

Mit CSS können wir verschiedene Eigenschaften verwenden, um die HTML -Elemente zu verbergen. Diese Eigenschaften umfassen "Anzeige: Keine","versteckt","Sichtbarkeit: versteckt","Filter: Deckkraft (0)","Clip-Pfad: Kreis (0)","Überlauf versteckt","Deckkraft: 0","Transformation: Skalierung (0)”Oder andere Eigenschaften wie Farbe mit dem“ anwendentransparent" Wirkung. In diesem Blog wurde die Verfahren zum Verstecken von HTML -Elementen mit CSS erörtert.