::backdrop

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Le pseudo-élément ::backdrop est une boîte de la taille de la zone d'affichage (viewport) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'API Fullscreen et aux éléments <dialog>.

Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.

css
// Cette ombre n'est affichée que lorsque la boîte de dialogue
// est ouverte avec dialog.showModal()
dialog::backdrop {
  background: rgba(255,0,0,.25);
}

Note : L'élément ::backdrop peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.

Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.

Syntaxe

Error: could not find syntax for this item

Exemples

Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.

css
video::backdrop {
  background-color: #448;
}

Voici le résultat obtenu :

On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.

Vous pouvez voir cette démonstration en live ou voir et modifier le code sur Glitch.

Spécifications

Specification
CSS Positioned Layout Module Level 4
# backdrop

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi