blob: aca4ca417ca81d94fe3eafbf41fa0f0a83abc1d3 (
plain)
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
|
---
title: '::backdrop'
slug: 'Web/CSS/::backdrop'
tags:
- API
- CSS
- 伪元素
- 参考
translation_of: 'Web/CSS/::backdrop'
---
<div>{{CSSRef}} {{SeeCompatTable}}</div>
<p><strong><code>::backdrop</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a> 是在任何处于<a href="/zh-CN/docs/Web/API/Fullscreen_API">全屏模式</a>的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。</p>
<pre class="brush: css no-line-numbers">/* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */
dialog::backdrop {
background: rgba(255,0,0,.25);
}</pre>
<p>所有处于全屏模式下的元素都被放在顶级渲染层中的一个后进先出（LIFO）栈里。在视区内容被绘制在屏幕上之前，这一特殊的渲染层总是最后被渲染（因此是最上层）。当一个元素在这个栈的栈顶时，<code>::backdrop</code> 伪元素允许我们遮盖，装饰或完全隐藏该元素的下层文档。</p>
<p><code>::backdrop</code> 不继承任何元素，同时也不被任何元素继承。没有规定什么属性不能应用于该伪元素。</p>
<h2 id="语法">语法</h2>
{{CSSSyntax}}
<h2 id="示例">示例</h2>
<p>在示例中，backdrop 样式用于将视频全屏显示时的背景颜色改为蓝灰色而不是大多数浏览器默认的黑色。</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>注意当 backdrop 可见时，上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的，但上面的 CSS 语句修改了它的外观。</p>
<p>You can <a href="https://fullscreen-requestfullscreen-demo.glitch.me/">see this example in action</a> or <a href="https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo">view or remix the code</a> on <a href="http://glitch.com/">Glitch</a>.</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>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<p>{{Compat("css.selectors.backdrop")}}</p>
</div>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref(":fullscreen")}} pseudo-class</li>
<li>{{HTMLElement("dialog")}} HTML element</li>
<li><a href="/zh-CN/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
</ul>
|
