<image>

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

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 (en-US) O tamanho da √°rea de posicionamento do fundo do elemento.
list-style-image (en-US) O tamanho de um car√°cter 1em
border-image (en-US) 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 (en-US) ?
mask-image (en-US) ?
shape-outside (en-US) ?
mask-border-source (en-US) ?
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:

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() (en-US),  conic-gradient() (en-US)repeating-conic-gradient() (en-US), e image-resolution (en-US).
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

BCD tables only load in the browser

 

 

Veja também