[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Values/element [Back]  [Original]

Fonction CSS element() - CSS | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Fonction CSS element()

Disponibilit limite

Cette fonctionnalit n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utiliss.

Vous voulez une meilleure prise en charge pour cette fonctionnalit ? Dites-nous pourquoi.

Exprimental: Il s'agit d'une technologie exprimentale.
Vrifiez attentivement le tableau de compatibilit des navigateurs avant de l'utiliser en production.

La fonction CSS element() est une valeur gnre partir d'un lment HTML quelconque. Cette image est dynamique, ce qui signifie que si l'lment HTML est modifi, les proprits CSS utilisant la valeur rsultante sont automatiquement mises jour.

Un scnario particulirement utile pour utiliser cette fonction serait de rendre une image dans un lment HTML <canvas>, puis de l'utiliser comme arrire-plan.

Pour les navigateurs bass sur Gecko, vous pouvez utiliser la mthode non standard document.mozSetImageElement() pour modifier l'lment utilis comme arrire-plan pour un lment CSS donn.

Dans cet article

Syntaxe

css
element(id)

o :

id

L'identifiant de l'lment utiliser comme arrire-plan, dfini l'aide de l'attribut HTML #id sur l'lment.

Syntaxe formelle

<element()> = 
element( <id-selector> )

<id-selector> =
<hash-token>
Cette syntaxe reflte le dernier standard selon CSS Images Module Level 4, Selectors Level 4. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Ces exemples fonctionnent dans les versions de Firefox qui prennent en charge -moz-element().

Un exemple quelque peu raliste

Cet exemple utilise un <div> cach comme arrire-plan. L'lment d'arrire-plan utilise un dgrad, mais inclut galement du texte qui est rendu comme partie de l'arrire-plan.

HTML

html
<div id="boite-cible">
  <p>
    Cet lment utilise l'lment #mon-arriere-plan comme image de fond&nbsp;!
  </p>
</div>

<div id="conteneur-arriere-plan">
  <div id="mon-arriere-plan">
    <p>Et voici un texte inscrit sur l'arrire-plan.</p>
  </div>
</div>

CSS

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'lment HTML <div> avec l'ID  mon-arriere-plan  est utilis comme arrire-plan pour le contenu, y compris le paragraphe  Cette bote utilise l'lment avec l'ID #mon-arriere-plan comme arrire-plan ! .

Aperu de la page

Cet exemple bas sur Vincent De Oliveira (angl.) cre un aperu du <div id="css-source"> l'intrieur du <div id="css-result">.

HTML

html
<div id="css-source">
  <h1>Aperu de la page</h1>
</div>
<div id="css-result"></div>

CSS

css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}

Rsultat

Spcifications

Spcification
CSS Images Module Level 4
# element-notation

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page