:xr-overlay
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The :xr-overlay CSS pseudo-class matches the DOM overlay element when a web page is being viewed in an immersive AR or VR environment.
Syntax
:xr-overlay {
/* ... */
}
Description
The :xr-overlay pseudo-class matches the overlay element for the duration of an immersive session using a DOM overlay.
The overlay element is a backdrop root. Any backdrop-filter effects on the DOM overlay element or its descendants do not modify the AR camera image (if applicable) or the rendered content drawn to the immersive session's XRWebGLLayer.
The overlay element itself is a stacking context due to its fixed position. The stacking contexts for ancestors of the overlay element, if any, do not paint to the immersive session's display.
Note: On a multi-display system, the stacking contexts for ancestors or sibling trees of the overlay element may be displayed on separate displays.
Examples
Basic usage
In this example, we define the overlay to be semi-transparent black, enabling content behind the overlay to be partially visible. To ensure enough contrast between content and its background, we set the color to white.
:xr-overlay {
background-color: rgba(0 0 0 / 0.5);
color: white;
}
Specifications
| Specification |
|---|
| WebXR DOM Overlays Module # selectordef-xr-overlay |