Fonction CSS element()
Disponibilité limitée
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 CSS element() est une valeur générée à partir d'un élément HTML quelconque. Cette image est dynamique, ce qui signifie que si l'élément HTML est modifié, les propriétés CSS utilisant la valeur résultante sont automatiquement mises à jour.
Un scénario particulièrement utile pour utiliser cette fonction serait de rendre une image dans un élément HTML <canvas>, puis de l'utiliser comme arrière-plan.
Pour les navigateurs basés sur Gecko, vous pouvez utiliser la méthode non standard document.mozSetImageElement() pour modifier l'élément utilisé comme arrière-plan pour un élément CSS donné.
Syntaxe
element(id)
où :
- id
-
L'identifiant de l'élément à utiliser comme arrière-plan, défini à l'aide de l'attribut HTML #id sur l'élément.
Syntaxe formelle
<element()> =
element( <id-selector> )
<id-selector> =
<hash-token>
Exemples
Ces exemples fonctionnent dans les versions de Firefox qui prennent en charge -moz-element().
Un exemple quelque peu réaliste
Cet exemple utilise un <div> caché comme arrière-plan. L'élément d'arrière-plan utilise un dégradé, mais inclut également du texte qui est rendu comme partie de l'arrière-plan.
HTML
<div id="boite-cible">
<p>
Cet élément utilise l'élément #mon-arriere-plan comme image de fond !
</p>
</div>
<div id="conteneur-arriere-plan">
<div id="mon-arriere-plan">
<p>Et voici un texte inscrit sur l'arrière-plan.</p>
</div>
</div>
CSS
#boite-cible {
width: 400px;
height: 400px;
background: -moz-element(#mon-arriere-plan) no-repeat;
}
#conteneur-arriere-plan {
overflow: hidden;
height: 0;
}
#mon-arriere-plan {
width: 1024px;
height: 1024px;
background-image: linear-gradient(to right, red, orange, yellow, white);
}
#mon-arriere-plan p {
transform-origin: 0 0;
rotate: 45deg;
color: white;
}
L'élément HTML <div> avec l'ID « mon-arriere-plan » est utilisé comme arrière-plan pour le contenu, y compris le paragraphe « Cette boîte utilise l'élément avec l'ID #mon-arriere-plan comme arrière-plan ! ».
Aperçu de la page
Cet exemple basé sur Vincent De Oliveira (angl.) crée un aperçu du <div id="css-source"> à l'intérieur du <div id="css-result">.
HTML
<div id="css-source">
<h1>Aperçu de la page</h1>
</div>
<div id="css-result"></div>
CSS
#css-result {
background: -moz-element(#css-source) no-repeat;
width: 256px;
height: 32px;
background-size: 80%;
border: dashed;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Images Module Level 4 # element-notation |
Compatibilité des navigateurs
Voir aussi
- La fonction
image() - La fonction
image-set() - Le type de donnée
<image> - Le type de donnée
<gradient> - La fonction
cross-fade() - La méthode API
document.mozSetImageElement()