<image>

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um <url>, e imagens geradas dinamicamente, geradas por <gradient> ou element(). Imagens podem ser usadas em inumeras propriedades CSS, como background-image, border-image, content, cursor, e list-style-image.

Tipos de imagens

CSS pode lidar com os seguintes tipos de imagens:

  • Imagens com dimensões intrínsecas (tamanho natural), tipo um JPEG, PNG, ou outro formato rasterizado.
  • Imagens com multiplas dimensões intrínsecas, 
    existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)
  • Imagens sem dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outro vetor.
  • Imagens com nenhuma dimensões intrínsecas, e nenhuma relação de aspecto intrínseco como um gradiente CSS.

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como width, height, ou background-size; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

Tipo de objeto Tamanho do objeto padrão
background-image O tamanho da área de posicionamento do fundo do elemento.
list-style-image O tamanho de um carácter 1em
border-image O tamanho da área da imagem da borda do elemento
cursor O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
border-image-source ?
mask-image ?
shape-outside ?
mask-border-source ?
Substituí o conteúdo, como quando combinando content com um pseudo-elemento (::after ou ::before) Um 300px × 150px retângulo

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

  • Se o tamanho especificado define tanto a largura quanto a altura, esses valores serão usado no tamanho concreto do objeto.
  • Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a relação intrínseca, se existir algum, as dimensões intrínsecas se o valoer espeficicado combinar, ou o tamanho do objeto padrão para esse valor ausente.
  • Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado de modo que corresponda à proporção intrínseca da imagem mas sem exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco, o relação de aspecto intrínseco do objeto é aplicado para ser usado; se esse objeto for vazio, a largura ou altura que faltam são retirados do tamanho de objeto padrão.
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.

Sintaxe

O tipo de data <image> pode ser representado por qualquer item seguinte:

  • Uma imagem denotada pelo tipo de data <url>
  • Um tipo de data <gradient>
  • Uma parte da página web, definida pela função element()

Exemplos

Imagens válidas

url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
linear-gradient(blue, red)  /* Um <gradient> */
element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */

Imagens inválidas

cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */

Especificações

Especificações Status Comentário
CSS Images Module Level 4
The definition of '<image>' in that specification.
Rascunho atual Adiciona element()image(),  conic-gradient()repeating-conic-gradient(), e image-resolution.
CSS Images Module Level 3
The definition of '<image>' in that specification.
Candidata a Recomendação Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .

Compatibilidade do navegador

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<image>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 10Opera Full support 2Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
cross-fade()
Experimental
Chrome Full support 17
Prefixed Notes
Full support 17
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
Edge No support NoFirefox No support NoIE No support NoOpera Full support 15
Prefixed Notes
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
Safari Full support 10
Notes
Full support 10
Notes
Notes Supports the original dual-image with percentage implementation only.
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
WebView Android Full support ≤37
Prefixed Notes
Full support ≤37
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
Chrome Android Full support 18
Prefixed Notes
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
Firefox Android No support NoOpera Android Full support 14
Prefixed Notes
Full support 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
Safari iOS Full support 9.3
Notes
Full support 9.3
Notes
Notes Support for the original dual-image with percentage implementation only.
Full support 5
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Supports the original dual-image with percentage implementation only.
Samsung Internet Android Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for the original dual-image with percentage implementation only.
element()
Experimental
Chrome No support NoEdge No support NoFirefox Full support 57
Prefixed
Full support 57
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No support 29 — 57
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image, background, border-image and border-image-source.
No support 4 — 29
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image and background.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 60
Prefixed
Full support 60
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No support 29 — 60
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image, background, border-image and border-image-source.
No support 4 — 29
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image and background.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
<gradient>Chrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
IE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 12.1
Full support 12.1
No support 11 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
Opera Android Full support 12.1
Full support 12.1
No support 11 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
image()
Experimental
Chrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes The -moz-image-rect() function supports fragments as of Firefox 4.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support No
Notes
No support No
Notes
Notes The -moz-image-rect() function supports fragments as of Firefox 4.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
image-set()
Experimental
Chrome Full support 21
Prefixed
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1107646.
IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Partial support 6
Prefixed Notes
Partial support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Full support 4.4
Prefixed
Full support 4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 25
Prefixed
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1107646.
Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Partial support 6
Prefixed Notes
Partial support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Full support 4.0
Prefixed
Full support 4.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
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 também