:xr-overlay CSS Pseudo-Klasse
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 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 für die Dauer einer immersiven Sitzung, die ein DOM-Overlay verwendet.
Das Overlay-Element ist eine Kulissenwurzel. Jegliche backdrop-filter Effekte auf das DOM-Overlay-Element oder dessen Nachkommen ändern nicht das AR-Kamerabild (falls zutreffend) oder den gerenderten Inhalt, der zur immersiven Sitzungsschicht des XRWebGLLayer gezeichnet wird.
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 gezeichnet.
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 Verwendung
In diesem Beispiel definieren wir das Overlay als halbdurchsichtiges Schwarz, wodurch der hinter dem Overlay befindliche Inhalt teilweise sichtbar wird. Um ausreichend Kontrast zwischen Inhalt und Hintergrund zu gewährleisten, 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 |