---
title: '::backdrop'
slug: 'Web/CSS/::backdrop'
tags:
  - API
  - CSS
  - Dialog
  - Fullscreen API
  - HTML DOM
  - Полный экран
  - Псевдо-элемент
  - Разметка
  - диалоговое окно
  - полноэкранный режим
translation_of: 'Web/CSS/::backdrop'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::backdrop</code></strong> это прямоугольник с размерами {{Glossary("viewport", "окна")}}, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью</span> <a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a> и элементы {{HTMLElement("dialog")}}.</p>

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

<pre class="brush: css no-line-numbers">/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
dialog::backdrop {
  background: rgba(255,0,0,.25);
}</pre>

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

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

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">{{CSSSyntax}}</pre>

<h2 id="Примеры">Примеры</h2>

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

<pre class="brush: css">video::backdrop {
  background-color: #448;
}
</pre>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p>

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

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
   <td>{{Spec2('Fullscreen')}}</td>
   <td>Впервые определено.</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<div>
<p>{{Compat("css.selectors.backdrop")}}</p>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{cssxref(":fullscreen")}} псевдо-класс</li>
 <li>{{HTMLElement("dialog")}} HTML элемент</li>
 <li><a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a></li>
</ul>