CSS/Selektoren/backdrop

Der ::backdrop-Selektor kann dazu verwendet werden, um einen Hintergrund zu erstellen, der das dahinterliegende Dokument für ein Element im Stack des Top-Layers versteckt. Das ::backdrop-Pseudoelement liegt zwischen dem obersten Element, z. B: einer Dialog-Box, und den anderen Elementen im Hintergrund.

Syntax	::backdrop
Parameter	{{{Parameter}}}}}
Browsersupport	Details: caniuse.com

Beispiel

dialog::backdrop { 
  background: rgb(0 0 0 / 0.5); 
}

Das hinter dem backdrop liegende Dokument wird durch eine schwarze, halb durchscheinende Maske verdeckt.

Siehe auch

• 

  z-index und Stapelkontext

  Top Layer > z-index: 100.000

   
• 

  modale Dialogfenster
  • dialog-Element
  • modal vs nichtmodal
  •  :backdrop

  Das UI-Element für Web-Apps

   
• 

  Fullscreen-Ansicht

  (Bild mit Lightbox-Effekt)

   

Weblinks

• WHATWG: Fullscreen API: ::backdrop
• MDN: ::backdrop
• caniuse: CSS selector: ::backdrop