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.
Want more support for this feature? Tell us why.
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()