Псевдокласс CSS `:xr-overlay`

Baseline Ограниченная доступность

Эта функция не входит в Baseline, поскольку она не работает в некоторых наиболее широко используемых браузерах.

Экспериментальная функция: Это экспериментальная технология
Перед использованием в рабочей среде внимательно ознакомьтесь с таблицей совместимости с браузерами.

:xr-overlay — CSS-псевдокласс, определённый в модуле WebXR DOM overlays. Он соответствует элементу DOM-оверлея, когда веб-страница просматривается в иммерсивной среде AR или VR.

Синтаксис

:xr-overlay {
  /* ... */
}

Описание

Псевдокласс :xr-overlay соответствует элементу оверлея в течение иммерсивного сеанса, использующего DOM-оверлей.

Элемент оверлея является корневым элементом фона. Любые эффекты backdrop-filter на элементе DOM-оверлея или его потомках не изменяют изображение с камеры AR (если применимо) или отрисованное содержимое, выводимое на XRWebGLLayer иммерсивного сеанса.

Сам элемент оверлея является контекстом наложения из-за своего фиксированного значения position. Контексты наложения предков элемента оверлея, если они есть, не выводятся на экран иммерсивного сеанса.

Примечание: В системах с несколькими дисплеями контексты наложения предков или соседних деревьев элемента оверлея могут отображаться на отдельных дисплеях.

Примеры

Базовое использование

В этом примере мы задаём для оверлея полупрозрачный чёрный цвет, благодаря чему содержимое под оверлеем частично видно. Чтобы обеспечить достаточный контраст между содержимым и фоном, мы задаём для color значение white.

:xr-overlay {
  background-color: rgb(0 0 0 / 0.5);
  color: white;
}

Выбор содержимого оверлея

В этом примере мы используем селектор :xr-overlay для стилизации элементов <button> внутри XR DOM-оверлея.

:xr-overlay button {
  background-color: white;
  color: black;
}

Спецификации

Спецификация
Модуль WebXR DOM Overlays # selectordef-xr-overlay

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`xr-overlay`	83	83	Нет	69	Нет	83	Нет	59	Нет	13.0	Нет	Нет

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:xr-overlay