Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::backdrop
Экспериментальная
Chrome Полная поддержка 37
Полная поддержка 37
Полная поддержка 32
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Полная поддержка 47IE Полная поддержка 11
С префиксом
Полная поддержка 11
С префиксом
С префиксом Требует вендорный префикс: -ms-
Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android ? Edge Mobile Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Android Полная поддержка 47Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android ?
Support on dialog elements
Экспериментальная
Chrome Полная поддержка 32Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android ? Edge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android ?
Fullscreen support
Экспериментальная
Chrome Нет поддержки НетEdge Полная поддержка ДаFirefox Полная поддержка 47IE Полная поддержка 11Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 47Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

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

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Akh-rman, ialexi-bl
Обновлялась последний раз: mdnwebdocs-bot,