Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

<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.

<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

Especificação Estatus Comentário
CSS Images Module Level 4
The definition of 'Using Elements as Images: the element() notation' in that specification.
Rascunho atual Actualmente adiado para o CSS4.

Compatibilidade dos navegadores

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ?4 -moz- 1 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No ? ?4 -moz- 1 No No No

1. element() is limited to background-image and background.

 

Veja tambem

Etiquetas do documento e colaboradores

 Colaboradores desta página: JonatasAmaral
 Última atualização por: JonatasAmaral,