<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<image>
cross-fade()
element()
Experimental
image-set()
paint()
Supports additional parameters to pass to the paintWorklet

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Veja também