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
|
---
title: element
slug: Web/CSS/element()
tags:
- CSS
- Fonction
- Reference
translation_of: Web/CSS/element()
---
{{CSSRef}}{{SeeCompatTable}}
La fonction **`element()`** 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.
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.
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 `background` CSS donné.
## Syntaxe
element(id)
### Paramètres
- **`id`**
- : L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.
## Exemples
### Un premier exemple réaliste
#### CSS
```css
.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;
}
```
#### HTML
```html
<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>
```
#### Résultat
Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arrière-plan généré avec un paragraphe HTML.
{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}
### Un second exemple plus méchant
#### CSS
```css
.exemple {
width: 400px;
height: 100px;
background: -moz-element(#monArrierePlan);
}
.cache {
overflow: hidden;
height: 0;
}
```
#### HTML
```html
<div class="exemple"></div>
<div class="cache">
<button id="monArrierePlan" type="button">
Méchant bouton
</button>
</div>
```
#### Résultat
{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- |
| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Reporté pour CSS4 |
## Compatibilité des navigateurs
{{Compat("css.types.image.element")}}
## Voir aussi
- {{domxref("document.mozSetImageElement()")}}
- {{cssxref("_image", "image()")}}
- {{cssxref("image-set", "image-set()")}}
- {{cssxref("<image>")}}
- {{cssxref("<gradient>")}}
- {{cssxref("element()")}}
- {{cssxref("cross-fade")}}
- {{domxref("document.mozSetImageElement()")}}
|
