element
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La fonction element() définit une valeur <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 <canvas> et on l'utilise comme arrière-plan.
Pour les navigateurs basés sur Gecko, on peut utiliser la méthode document.mozSetImageElement() pour modifier l'élément utilisé comme arrière-plan pour un background CSS donné.
Syntaxe
element(id)
Paramètres
Exemples
Un premier exemple réaliste
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
<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></div>
</div>
</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.
Un second exemple plus méchant
CSS
.exemple {
width: 400px;
height: 100px;
background: -moz-element(#monArrierePlan);
}
.cache {
overflow: hidden;
height: 0;
}
HTML
<div class="exemple"></div>
<div class="cache">
<button id="monArrierePlan" type="button">Méchant bouton</button>
</div>
Résultat
Spécifications
| Specification |
|---|
| CSS Images Module Level 4 # element-notation |
Compatibilité des navigateurs
Chargement…