1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
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>
{{CSSSyntax}}
<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>
|
