<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

Specification
CSS Images Module Level 3
# image-values

Compatibilidade do navegador

BCD tables only load in the browser

Veja também