Pseudo-element ::backdrop CSS

Czas czytania: < 1 minut

Pseudo-element CSS ::backdrop stanowi pole o wielkości okna bezpośrednio za obiektem. Można więc uznać, że jest to pewna forma tła.

Do czego służy ::backdrop?

Jeżeli wpiszemy w translator hasło backdrop jako tłumaczenie pojawi się nam hasło „zasłona” i w pewnym sensie tym właśnie jest ta funkcja. Nakłada się ona bowiem na obiekt, w którym ją wywołujemy. Ma ona jednak ustawione wartości tak, że rozlewa się na cały ekran jednocześnie będąc stawioną tak by nie zakrywać obiektu w którym została wywołana.

Pseudo-element ten przyda nam się kiedy np.

  • wywołujemy pop-pup i chcemy ukryć zawartość strony,
  • robimy coś w trybie pełnoekranowym Fullscreen,

Przykład zastosowania:

dialog::backdrop {
  background: pink;
}

żródło:

https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

    Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

    *Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
    *W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go