element

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A função CSS element() define uma <image> gerada de um elemento HTML qualquer. Essa imagem é dinamica, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento <canvas>, e então usar-lo como um background.

Em navegadores Gecko, você pode usar o metodo não padronizado document.mozSetImageElement() para mudar o elemento sendo usado como background por um elemento de background selecionado por CSS.

Sintaxe

element( id )

Onde:

id

É o ID de um elemento para usar como background, especificado usando o atributo HTML #id no elemento.

Exemplos

Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam -moz-element().

Um exemplo de alguma maneira real

Esse exemplo usa uma <div> escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.

html
<div
  style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
    id="myBackground1"
    style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>

A <div> com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

example1.png

Um exemplo ainda mais bizarro

Esse exemplo usa um elemento <button> se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.

html
<div
  style="width:400px; height:100px; background:-moz-element(#myBackground2);"></div>

<div style="overflow:hidden; height:0;">
  <button id="myBackground2" type="button">Evil button!</button>
</div>

example2.png

Especificações

Specification
CSS Images Module Level 4
# element-notation

Compatibilidade dos navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
element()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Veja tambem