element

Experimental: Esta é uma tecnologia experimental (en-US)
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() (en-US) 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!".

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>

Especificações

Specification
CSS Images Module Level 4 # element-notation

Compatibilidade dos navegadores

BCD tables only load in the browser

Veja tambem

document.mozSetImageElement() (en-US)