Pseudo-element ::backdrop CSS

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