:xr-overlay CSS-Pseudoklasse
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
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, definiert im Modul WebXR DOM-Overlays, 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 mit dem Overlay-Element während der Dauer einer immersiven Sitzung überein, die ein DOM-Overlay verwendet.
Das Overlay-Element ist eine backdrop root. Jegliche backdrop-filter-Effekte auf das DOM-Overlay-Element oder dessen Nachkommen verändern nicht das AR-Kamera-Bild (falls zutreffend) oder den gerenderten Inhalt, der zur immersiven Sitzung im XRWebGLLayer gezeichnet wird.
Das Overlay-Element selbst ist ein stapelbarer Kontext aufgrund seiner festen position. Die stapelbaren Kontexte für Vorfahren des Overlay-Elements, falls vorhanden, werden nicht auf das Display der immersiven Sitzung gemalt.
Hinweis: In einem Multi-Display-System können die stapelbaren 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 halbtransparentes Schwarz, wodurch der Inhalt hinter dem Overlay teilweise sichtbar wird. 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;
}
Inhalt eines Overlays anvisieren
In diesem Beispiel verwenden wir den :xr-overlay-Selektor, um die <button>-Elemente innerhalb eines XR DOM-Overlays zu stylen.
:xr-overlay button {
background-color: white;
color: black;
}
Spezifikationen
| Spezifikation |
|---|
| WebXR DOM Overlays Module # selectordef-xr-overlay |