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

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
<gradient>Chrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge ? Firefox Full support Yes
Notes
Full support Yes
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 YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
Opera Android ? Safari iOS ? Samsung Internet Android ?
element()
Experimental
Chrome No support NoEdge ? Firefox Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Implemented with 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 Implemented with 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 também

Etiquetas do documento e colaboradores

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