:xr-overlay CSS-Pseudoklasse
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
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 Pseudoklasse :xr-overlay stimmt mit dem Overlay-Element während einer immersiven Sitzung überein, bei der ein DOM-Overlay verwendet wird.
Das Overlay-Element ist eine Hintergrundwurzel. Jegliche backdrop-filter-Effekte auf das DOM-Overlay-Element oder seine Nachkommen ändern nicht das AR-Kamerabild (falls zutreffend) oder den gerenderten Inhalt, der zur immersiven Sitzung auf die XRWebGLLayer gezeichnet wird.
Das Overlay-Element selbst ist aufgrund seiner festen position ein Stacking-Kontext. Die Stacking-Kontexte für Vorfahren des Overlay-Elements, falls vorhanden, werden nicht auf das Display der immersiven Sitzung gemalt.
Hinweis: In einem System mit mehreren Displays können die Stacking-Kontexte für Vorfahren oder Geschwisterzweige des Overlay-Elements auf separaten Displays angezeigt werden.
Beispiele
Grundlegende Verwendung
In diesem Beispiel definieren wir das Overlay als halbtransparentes Schwarz, sodass der Inhalt hinter dem Overlay teilweise sichtbar ist. Um ausreichenden Kontrast zwischen Inhalt und Hintergrund sicherzustellen, setzen wir die color auf white.
:xr-overlay {
background-color: rgba(0 0 0 / 0.5);
color: white;
}
Spezifikationen
| Spezifikation |
|---|
| WebXR DOM Overlays Module # selectordef-xr-overlay |