Jak ukryć elementy HTML w CSS

Może być sytuacja, gdy nie chcesz, aby niektóre treści pojawiły się na stronie internetowej. Na przykład komponenty strony internetowej, takie jak pasek nawigacji, nagłówek, stopka i nie tylko. Ponadto, czasami podczas projektowania jakiejkolwiek konkretnej części naszej aplikacji internetowej, często musimy ukryć niektóre elementy. Dla odpowiednich istnieje wiele metod ukrywania elementów HTML za pomocą CSS.

Wynik tego bloga to:

• Jak ukryć elementy HTML za pomocą CSS?
• Metoda 1: ukryj elementy HTML za pomocą właściwości CSS „Display: Brak”
• Metoda 2: Ukryj elementy HTML za pomocą właściwości „ukrytej”
• Metoda 3: ukryj elementy HTML za pomocą właściwości CSS „Widoczność: ukryta”
• Metoda 4: Ukryj elementy HTML za pomocą właściwości CSS „Filter: Kryta (0)”
• Metoda 5: ukryj elementy HTML za pomocą właściwości CSS „Clip-Path: Circle (0)”
• Metoda 6: ukryj elementy HTML za pomocą właściwości CSS „przepełnienie: ukryty”
• Metoda 7: ukryj elementy HTML za pomocą właściwości CSS „Kryta: 0”
• Metoda 8: ukryj elementy HTML za pomocą właściwości CSS „Transform: Scale (0)”
• Metoda 9: ukryj elementy HTML, stosując właściwości z „przezroczystym” efektem

Jak ukryć elementy HTML za pomocą CSS?

Do ukrycia elementów HTML stosuje się wiele możliwych metod CSS. Niektóre z nich są wymienione poniżej:

• Nie wyświetla się
• Ukryta własność
• Widoczność: ukryty
• Filtr: krycie (0)
• właściwość Clip-Path
• Olflow: ukryty
• Krycie: 0
• Transform: Scale (0)
• przezroczysty
• rozmiar czcionki

Opracujmy każdą z wyżej wymienionych metod jeden po drugim. Ale wcześniej utworzymy plik HTML do demonstracji.

Warunek: Utwórz stronę HTML

W pliku HTML, wewnątrz elementu ciała, najpierw dodaj „" element. Wewnątrz istnieją dwa tagi akapitowe, każdy powiązany z unikalnym identyfikatorem „Pierwszy" I "drugi”Odpowiednio:

Pierwszy paragraf!

Akapit drugi!

Metoda 1: ukryj elementy HTML za pomocą właściwości CSS „Display: Brak”

CSS „wyświetlacz„Własność o wartości”nic”Usuwa element i pozwala na jego miejsce. Na przykład chcemy ukryć drugi akapit. W tym celu zastosowana jest do niej omawiana właściwość CSS, jak pokazano poniżej:

#drugi
Nie wyświetla się;

• "#drugi„Odnosi się do div z identyfikatorem.
• "wyświetlacz„Wartość jest przypisana wartość”nic”:

Można zauważyć, że teraz drugi akapit jest ukryty:

Metoda 2: Ukryj elementy HTML za pomocą właściwości „ukrytej”

Inną metodą ukrycia elementu HTML jest napisanie „ukryty”Atrybut z elementem w następujący sposób:

Akapit drugi!

Można zauważyć, że pierwszy element jest ukryty:

Metoda 3: ukryj elementy HTML za pomocą właściwości CSS „Widoczność: ukryta”

CSS „widoczność„Własność można również wykorzystać, aby po prostu wizualnie ukryć element, w taki sposób, że inne elementy nie mogą zająć ich miejsca. W poniższym przykładzie „widoczność„Wartość właściwości jest ustalana jako„ukryty”Dla pierwszego elementu HTML:

#Pierwszy
Widoczność: ukryta;

Odpowiednie wyjście można zobaczyć z obrazu poniżej:

Metoda 4: Ukryj elementy HTML za pomocą właściwości CSS „Filter: Kryta (0)”

Filtr stosuje przejrzystość do elementów. W przykładzie „filtr„Wartość jest przypisana jako„krycie (0)”, Co oznacza, że ​​na stronie internetowej będzie całkowicie przezroczysty:

#drugi
Filtr: krycie (0);

Z poniższego ekranu możemy zauważyć, że akapit z id ”drugi" jest ukryty:

Metoda 5: ukryj elementy HTML za pomocą właściwości CSS „Clip-Path: Circle (0)”

Właściwość Clip-Path wskazuje, która część strony internetowej powinna być wyświetlana.

W poniższym przykładzie „ścieżka do klipu„Własność o wartości”okrąg (0)”Wskazuje, że nie pokazano żadnej zawartości związanej z dodanym tagiem:

#Pierwszy
Clip-Path: Circle (0);

Oto ekran wyjściowy, reprezentujący, że wyświetlany jest drugi element, a pierwszy akapit nie jest widoczny:

Metoda 6: ukryj elementy HTML za pomocą właściwości CSS „przepełnienie: ukryty”

„„przelewowy„Wartość jest przypisana wartość”ukryty„Aby kontrolować treść. W rezultacie przepływ jest przycinany, a pozostała treść jest ukryta:

#drugi
Wysokość: 0px;
szerokość: 0px;
Olflow: ukryty;

• Najpierw ustaw wysokość i szerokość Div Id.
• Treść przepełni się z określonego obszaru.
• A później "przelewowy„Wartość jest przypisana wartość”ukryty„Aby ukryć treść.

Z poniższego wyjścia widzimy, że drugi element nie jest widoczny:

Metoda 7: ukryj elementy HTML za pomocą właściwości CSS „Kryta: 0”

Poziom krycia to poziom przejrzystości elementu. „„nieprzezroczystość„Własność o wartości”0”Oznacza, że ​​element będzie w pełni przezroczysty:

#Pierwszy
Krycie: 0;

Wyjście

Metoda 8: ukryj elementy HTML za pomocą właściwości CSS „Transform: Scale (0)”

„„skala()”Funkcja zmienia rozmiar elementu poziomo i pionowo. Skala (0) wartość „przekształcać”Właściwość wskazuje, że element jest rozmiarowy do zera oznacza, że ​​jest ukryty:

#Pierwszy
Transform: Scale (0);

Wyjście

Metoda 9: ukryj elementy HTML, stosując właściwości z „przezroczystym” efektem

Zróbmy drugi element w pełni przezroczysty. W tym celu przypisz „kolor tła" I "kolor„Wartości właściwości jako„przezroczysty”:

#drugi
kolor tła: przezroczysty;
Kolor: przezroczysty;

Drugi element jest w pełni przezroczysty w porównaniu z pierwszym. Dlatego na ekranie nie można go zobaczyć na ekranie:

Wyjaśniliśmy niektóre z możliwych metod CSS do ukrycia elementów HTML.

Wniosek

CSS pozwala nam używać różnych właściwości do ukrycia elementów HTML. Te właściwości obejmują „Nie wyświetla się”,„ukryty”,„Widoczność: ukryty”,„Filtr: krycie (0)”,„Clip-Path: Circle (0)”,„Olflow: ukryty”,„Krycie: 0”,„Transform: Scale (0)”Lub stosowanie innych właściwości, takich jak kolor z„przezroczysty”Efekt. W tym blogu omówiono procedury ukrywania elementów HTML za pomocą CSS.