Pseudo-classe CSS :xr-overlay
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La pseudo-classe CSS :xr-overlay correspond à l'élément de superposition DOM lorsqu'une page web est affichée dans un environnement AR ou VR immersif.
Syntaxe
:xr-overlay {
/* ... */
}
Description
La pseudo-classe :xr-overlay correspond à l'élément de superposition pendant toute la durée d'une session immersive utilisant une superposition DOM.
L'élément de superposition est une racine d'arrière-plan. Tout effet backdrop-filter appliqué à l'élément de superposition DOM ou à ses descendants ne modifie pas l'image de la caméra AR (le cas échéant) ni le contenu rendu dans le XRWebGLLayer de la session immersive.
L'élément de superposition lui-même est un contexte d'empilement en raison de sa position fixe. Les contextes d'empilement des ancêtres de l'élément de superposition, le cas échéant, ne sont pas peints sur l'affichage de la session immersive.
Note : Dans un système à plusieurs écrans, les contextes d'empilement des ancêtres ou des arbres voisins de l'élément superposé peuvent s'afficher sur des écrans distincts.
Exemples
Utilisation simple
Dans cet exemple, nous définissons la superposition comme étant noire semi-transparente, permettant au contenu derrière la superposition d'être partiellement visible. Pour garantir un contraste suffisant entre le contenu et son arrière-plan, nous définissons la couleur (color) sur white.
:xr-overlay {
background-color: rgba(0 0 0 / 0.5);
color: white;
}
Spécifications
| Spécification |
|---|
| WebXR DOM Overlays Module # selectordef-xr-overlay |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:modal - La pseudo-classe
:fullscreen - La pseudo-classe
:picture-in-picture - Les pseudo-classes CSS
- Les fondamentaux de l'API WebXR
- La propriété
XRSession.domOverlayState