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

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.

<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

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome No support NoEdge ? Firefox Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes element() is limited to background-image and background.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile ? Firefox Android Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes element() is limited to background-image and background.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

Veja tambem

Etiquetas do documento e colaboradores

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