blob: dccf033dee11aee190a784e09a593e6ba1e8dbf0 (
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
title: '::backdrop'
slug: 'Web/CSS/::backdrop'
tags:
- CSS
- Full-screen
- Layout
- NeedsContent
- Pseudo-element
- Reference
translation_of: 'Web/CSS/::backdrop'
---
<div>{{CSSRef}} {{SeeCompatTable}}</div>
<p>El {{Cssxref("pseudo-elements", "pseudo-element")}} <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::backdrop</code></strong> és una caixa situada immediatament per sota d'un element visualitzat en mode de <a href="/en-US/docs/Web/API/Fullscreen_API">pantalla completa</a> (i per sobre de qualsevol element inferior de la pila). Els elements de pantalla completa formen part de la pila de la <a href="https://fullscreen.spec.whatwg.org/#top-layer">capa superior</a>, és a dir, es representen davant de qualsevol altre contingut.</p>
<pre class="brush: css no-line-numbers">dialog::backdrop {
background: rgba(255,0,0,.25);
}</pre>
<p>El pseudo-element <code>::backdrop</code> es pot utilitzar per donar estil o ocultar el document subjacent d'un element que es mostra a pantalla completa.</p>
<p><code>::backdrop</code> no hereta de cap element i no és hereditari. No es fa cap restricció sobre quines propietats s'apliquen a aquest pseudo-element.</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
<td>{{Spec2('Fullscreen')}}</td>
<td>Definició inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>32.0 {{property_prefix("webkit")}}<br>
37.0</td>
<td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td>
<td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td>
<td>11 {{property_prefix("ms")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>en <code><dialog></code></td>
<td>32.0 {{property_prefix("webkit")}}<br>
37.0</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>en fullscreen</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td>
<td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td>
<td>11 {{property_prefix("ms")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td>
<td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>en <code><dialog></code></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>en fullscreen</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td>
<td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] See {{bug(1064843)}}</p>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li>{{cssxref(":fullscreen")}}</li>
<li>{{HTMLElement("dialog")}}</li>
</ul>
|
