::backdrop

CSS псевдо-элемент ::backdrop это прямоугольник с размерами окна, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью Fullscreen API и элементы <dialog>.

Когда несколько элементов находятся в полноэкранном режиме, подложка появляется под тем из них, который находится на переднем плане и над всеми остальными.

/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
dialog::backdrop {
  background: rgba(255,0,0,.25);
}

Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент ::backdrop позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.

::backdrop не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.

Синтаксис

::backdrop

Примеры

В этом примере, стиль подложки при открытии видео в полноэкранном режиме делаёт её серо-голубой, а не серой, какой она является по стандарту в большинстве браузеров.

video::backdrop {
  background-color: #448;
}

В результате окно выглядит так:

Обратите внимание на эффект серо-голуых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.

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

Спецификация Статус Комментарий
Fullscreen API
Определение '::backdrop' в этой спецификации.
Живой стандарт Впервые определено.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::backdrop
Экспериментальная
Chrome Полная поддержка 37
Полная поддержка 37
Полная поддержка 32
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
С префиксом
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Полная поддержка 47IE Полная поддержка 11
С префиксом
Полная поддержка 11
С префиксом
С префиксом Требует вендорный префикс: -ms-
Opera Полная поддержка 24
Полная поддержка 24
Полная поддержка 19
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Нет поддержки НетWebView Android Полная поддержка 37
Полная поддержка 37
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 37
Полная поддержка 37
Полная поддержка 32
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 47Opera Android Полная поддержка 24
Полная поддержка 24
Полная поддержка 19
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Нет поддержки НетSamsung Internet Android ?
Support on dialog elements
Экспериментальная
Chrome Полная поддержка 32Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка 19Safari Нет поддержки НетWebView Android Полная поддержка ≤37Chrome Android Полная поддержка 32Firefox Android Нет поддержки НетOpera Android Полная поддержка 19Safari iOS Нет поддержки НетSamsung Internet Android ?
Fullscreen support
Экспериментальная
Chrome Нет поддержки НетEdge Полная поддержка 12Firefox Полная поддержка 47IE Полная поддержка 11Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 47Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также