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