-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
78 lines (54 loc) · 6.47 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
---
title: <image>
slug: Web/CSS/image
---
{{CSSRef}}
O [tipo de data CSS](/pt-BR/docs/Web/CSS) **`<image>`** representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("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](https://en.wikipedia.org/wiki/Raster_graphics).
- 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](https://en.wikipedia.org/wiki/Vector_graphics).
- 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 {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("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 |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| {{cssxref("background-image")}} | O tamanho da área de posicionamento do fundo do elemento. |
| {{cssxref("list-style-image")}} | O tamanho de um carácter `1em` |
| {{cssxref("border-image")}} | O tamanho da área da imagem da borda do elemento |
| {{cssxref("cursor")}} | O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente |
| {{cssxref("border-image-source")}} | ? |
| {{cssxref("mask-image")}} | ? |
| {{cssxref("shape-outside")}} | ? |
| {{cssxref("mask-border-source")}} | ? |
| Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::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](/pt-BR/docs/Web/CSS/image#Browser_compatibility) para mais detalhes.
## Sintaxe
O tipo de data `<image>` pode ser representado por qualquer item seguinte:
- Uma imagem denotada pelo tipo de data {{cssxref("<url>")}}
- Um tipo de data {{cssxref("<gradient>")}}
- Uma parte da página web, definida pela função {{cssxref("element", "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
```plain example-bad
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
{{Specifications}}
## Compatibilidade do navegador
{{Compat}}
## Veja também
- {{cssxref("<gradient>")}}
- {{cssxref("element()")}}