:xr-overlay CSS-Pseudoklasse
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die :xr-overlay CSS Pseudoklasse stimmt mit dem DOM-Overlay-Element überein, wenn eine Webseite in einer immersiven AR- oder VR-Umgebung betrachtet wird.
Syntax
:xr-overlay {
/* ... */
}
Beschreibung
Die :xr-overlay Pseudoklasse stimmt während einer immersiven Sitzung mit dem Overlay-Element überein, das ein DOM-Overlay verwendet.
Das Overlay-Element ist eine Hintergrundwurzel. Jegliche backdrop-filter Effekte auf dem DOM-Overlay-Element oder dessen Nachkommen verändern nicht das AR-Kamerabild (falls zutreffend) oder die dargestellten Inhalte, die auf das XRWebGLLayer der immersiven Sitzung gezeichnet werden.
Das Overlay-Element selbst ist ein Stacking-Kontext aufgrund seiner festen position. Die Stacking-Kontexte für Vorfahren des Overlay-Elements, falls vorhanden, werden nicht auf das Display der immersiven Sitzung gemalt.
Hinweis: Auf einem System mit mehreren Displays können die Stacking-Kontexte für Vorfahren oder Geschwisterbäume des Overlay-Elements auf separaten Displays angezeigt werden.
Beispiele
Grundlegende Nutzung
In diesem Beispiel definieren wir das Overlay als halbtransparent schwarz, was es ermöglicht, dass Inhalte hinter dem Overlay teilweise sichtbar sind. Um genügend Kontrast zwischen Inhalt und Hintergrund sicherzustellen, setzen wir die color auf white.
:xr-overlay {
background-color: rgb(0 0 0 / 0.5);
color: white;
}
Spezifikationen
| Spezifikation |
|---|
| WebXR DOM Overlays Module # selectordef-xr-overlay |