<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:

* Uma imagem denotada pelo tipo de data `<url>()` (en-US)
* Um tipo de data `<gradient>` (en-US)
* 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 with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<gradient>` (en-US)
* `element()`