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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: <image>
slug: Web/CSS/imagem
tags:
- CSS
- CSS imagens
- Layout
- Referencia
- Tipo de data CSS
- Web
- graficos
translation_of: Web/CSS/image
---
<div>{{CSSRef}}</div>
<p>O <a href="/en-US/docs/Web/CSS">tipo de data CSS </a><strong><code><image></code></strong> 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")}}.</p>
<h2 id="Tipos_de_imagens">Tipos de imagens</h2>
<p>CSS pode lidar com os seguintes tipos de imagens:</p>
<ul>
<li>Imagens com <span class="short_text" id="result_box" lang="pt"><span><em>dimensões intrínsecas </em>(tamanho natural), tipo um </span></span>JPEG, PNG, ou outro <a href="https://en.wikipedia.org/wiki/Raster_graphics">formato rasterizado</a>.</li>
<li>Imagens com <em>multiplas <span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas, </span></span></em>
<div id="gt-res-content">
<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="pt"><span>existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a </span></span><span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)</span></span></div>
</div>
</li>
<li>Imagens sem <span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outro</span></span> <a href="https://en.wikipedia.org/wiki/Vector_graphics">vetor</a>.</li>
<li id="no_intrinsic">Imagens com nenhuma <span class="short_text" id="result_box" lang="pt"><span>dimensões intrínsecas, e nenhuma relação de aspecto intrínseco</span></span><span class="short_text" lang="pt"><span> </span></span>como um gradiente CSS.</li>
</ul>
<p>CCS determina um tamanho concreto do objeto usando (1)<span class="short_text" id="result_box" lang="pt"><span> <em>suas dimensões intrínsecas;</em></span></span> (2) <span class="short_text" id="result_box" lang="pt"><span><em>seu tamanho especificado,</em> definido por propriedades CSS como</span></span> {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) <em>é o tamanho padrão,</em> <span id="result_box" lang="pt"><span>determinado pelo tipo de propriedade em que a imagem é usada</span></span>:</p>
<table class="standard-table">
<thead>
<tr>
<th>Tipo de objeto</th>
<th>Tamanho do objeto padrão</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{cssxref("background-image")}}</td>
<td>O tamanho da <span class="short_text" id="result_box" lang="pt"><span>área de posicionamento</span></span> do fundo do elemento<span class="short_text" id="result_box" lang="pt"><span>.</span></span></td>
</tr>
<tr>
<td>{{cssxref("list-style-image")}}</td>
<td>O tamanho de um carácter <code>1em</code></td>
</tr>
<tr>
<td>{{cssxref("border-image")}}</td>
<td>O tamanho da área da imagem da borda do elemento</td>
</tr>
<tr>
<td>{{cssxref("cursor")}}</td>
<td><span id="result_box" lang="pt"><span>O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente</span></span></td>
</tr>
<tr>
<td>{{cssxref("border-image-source")}}</td>
<td>?</td>
</tr>
<tr>
<td>{{cssxref("mask-image")}}</td>
<td>?</td>
</tr>
<tr>
<td>{{cssxref("shape-outside")}}</td>
<td>?</td>
</tr>
<tr>
<td>{{cssxref("mask-border-source")}}</td>
<td>?</td>
</tr>
<tr>
<td><span class="short_text" id="result_box" lang="pt"><span>Substituí o conteúdo</span></span>, <span class="short_text" id="result_box" lang="pt"><span>como quando combinando </span></span>{{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})</td>
<td>Um 300px × 150px <span class="short_text" id="result_box" lang="pt"><span>retângulo</span></span></td>
</tr>
</tbody>
</table>
<p>O tamanho do objeto concreto é calculado usando o seguinte algoritimo:</p>
<ul>
<li>Se o tamanho especificado define <em>tanto a largura quanto a altura, </em>esses valores serão usado no tamanho concreto do objeto.</li>
<li>Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a <span class="short_text" id="result_box" lang="pt"><span>relação intrínseca, se existir algum, as dimensões intrínsecas</span></span><span class="short_text" lang="pt"><span> se o valoer espeficicado combinar, </span></span><span class="short_text" id="result_box" lang="pt"><span>ou o tamanho do objeto padrão para esse valor ausente.</span></span></li>
<li>Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado <span id="result_box" lang="pt"><span>de modo que corresponda à proporção intrínseca da imagem mas sem</span></span><span class="short_text" id="result_box" lang="pt"><span> exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco</span></span><span class="short_text" lang="pt"><span>, o </span></span><span class="short_text" id="result_box" lang="pt"><span>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.</span></span></li>
</ul>
<div class="note"><strong>Nota:</strong> Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção <a href="/en-US/docs/Web/CSS/image#Browser_compatibility">compatibilidade dos navegadores </a><span class="short_text" lang="pt"><span>para mais detalhes</span></span>.</div>
<h2 id="Sintaxe"><span class="short_text" id="result_box" lang="pt"><span>Sintaxe</span></span></h2>
<p>O tipo de data <code><image></code> pode ser representado por qualquer item seguinte:</p>
<ul>
<li>Uma imagem denotada pelo tipo de data {{cssxref("<url>")}}</li>
<li>Um tipo de data {{cssxref("<gradient>")}}</li>
<li>Uma parte da página web, definida pela função {{cssxref("element", "element()")}}</li>
</ul>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Imagens_válidas">Imagens válidas</h3>
<pre>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 */
</pre>
<h3 id="Imagens_inválidas">Imagens inválidas</h3>
<pre class="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. */
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td><span class="short_text" id="result_box" lang="pt"><span>Adiciona</span></span> {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Definição inicial. Depois disso, não existe definição explicita do tipo de data <code><image>.</code> Imagens podem ser somente definidas usando a notação funciona <code>url()</code> .</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_do_navegador"><span class="short_text" id="result_box" lang="pt"><span>Compatibilidade do navegador</span></span></h2>
<p> </p>
<p>{{Compat("css.types.image")}}</p>
<p> </p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{cssxref("<gradient>")}}</li>
<li>{{cssxref("element()")}}</li>
</ul>
|
