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
144
145
146
147
|
---
title: element
slug: Web/CSS/element()
tags:
- CSS
- Fonction
- Reference
translation_of: Web/CSS/element()
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La fonction <strong><code>element()</code></strong> définit une valeur {{cssxref("<image>")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.</p>
<p>Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.</p>
<p>Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un <code>background</code> CSS donné.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox notranslate">element(<var>id</var>)</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><strong><code>id</code></strong></dt>
<dd>L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Un_premier_exemple_réaliste">Un premier exemple réaliste</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">.exemple {
width: 400px;
height: 400px;
background: -moz-element(#monArrierePlan) no-repeat;
}
.paragraphe {
transform-origin: 0 0;
transform: rotate(45deg);
color: white;
}
#monArrierePlan{
width: 1024px;
height: 1024px;
background-image: linear-gradient(to right, red, orange, yellow, white);
}
.cache {
overflow: hidden;
height: 0;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div class="exemple">
<p>
Cet élément utilise l'élément
#monArrierePlan comme image
de fond !
</p>
</div>
<div class="cache">
<div id="monArrierePlan">
<p class="paragraphe">
Et voici un texte inscrit sur
l'arrière-plan.
</p>
<div>
<div></pre>
<h4 id="Résultat">Résultat</h4>
<p>Pour les navigateurs qui prennent en charge <code>element</code>, on peut ici voir un arrière-plan généré avec un paragraphe HTML.</p>
<p>{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}</p>
<h3 id="Un_second_exemple_plus_méchant">Un second exemple plus méchant</h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">.exemple {
width: 400px;
height: 100px;
background: -moz-element(#monArrierePlan);
}
.cache {
overflow: hidden;
height: 0;
} </pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><div class="exemple"></div>
<div class="cache">
<button id="monArrierePlan" type="button">
Méchant bouton
</button>
</div></pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th>Spécification</th>
<th>État</th>
<th>Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td>Reporté pour CSS4</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.types.image.element")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("document.mozSetImageElement()")}}</li>
<li>{{cssxref("_image", "image()")}}</li>
<li>{{cssxref("image-set", "image-set()")}}</li>
<li>{{cssxref("<image>")}}</li>
<li>{{cssxref("<gradient>")}}</li>
<li>{{cssxref("element()")}}</li>
<li>{{cssxref("cross-fade")}}</li>
<li>{{domxref("document.mozSetImageElement()")}}</li>
</ul>
|
