:xr-overlay
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die :xr-overlay CSS Pseudo-Klasse entspricht dem DOM-Overlay-Element, wenn eine Webseite in einer immersiven AR- oder VR-Umgebung betrachtet wird.
Syntax
:xr-overlay {
/* ... */
}
Beschreibung
Die :xr-overlay Pseudo-Klasse entspricht dem Overlay-Element während einer immersiven Sitzung mit einem DOM-Overlay.
Das Overlay-Element ist eine Wurzel des Hintergrundbereichs. Jegliche backdrop-filter Effekte auf dem DOM-Overlay-Element oder seinen Nachkommen verändern nicht das AR-Kamerabild (falls zutreffend) oder den gerenderten Inhalt, der in der immersiven Sitzung auf die XRWebGLLayer gezeichnet wird.
Das Overlay-Element selbst ist ein Stapelkontext aufgrund seiner festen position. Die Stapelkontexte für Vorfahren des Overlay-Elements, falls vorhanden, werden nicht auf das Display der immersiven Sitzung gezeichnet.
Hinweis: Auf einem System mit mehreren Displays können die Stapelkontexte für Vorfahren oder Geschwisterbäume des Overlay-Elements auf separaten Displays angezeigt werden.
Beispiele
Grundlegende Verwendung
In diesem Beispiel definieren wir das Overlay als halbtransparentes Schwarz, was ermöglicht, dass der Inhalt hinter dem Overlay teilweise sichtbar ist. Um ausreichend Kontrast zwischen dem Inhalt und seinem Hintergrund sicherzustellen, setzen wir die color auf weiß.
:xr-overlay {
background-color: rgba(0 0 0 / 0.5);
color: white;
}
Spezifikationen
| Spezifikation |
|---|
| WebXR DOM Overlays Module # selectordef-xr-overlay |