unslug pt-br: move

1 files changed, 157 insertions, 0 deletions

diff --git a/files/pt-br/web/css/image/index.html b/files/pt-br/web/css/image/index.html
new file mode 100644
index 0000000000..fe9631cb30
--- /dev/null
+++ b/files/pt-br/web/css/image/index.html
@@ -0,0 +1,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>&lt;image&gt;</code></strong> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("&lt;url&gt;")}}, e imagens geradas dinamicamente, geradas por {{cssxref("&lt;gradient&gt;")}} 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>&lt;image&gt;</code> pode ser representado por qualquer item seguinte:</p>
+
+<ul>
+ <li>Uma imagem denotada pelo tipo de data {{cssxref("&lt;url&gt;")}}</li>
+ <li>Um tipo de data {{cssxref("&lt;gradient&gt;")}}</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 &lt;url&gt;, enquanto test.jpg é uma imagem real */
+linear-gradient(blue, red)  /* Um &lt;gradient&gt; */
+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', '&lt;image&gt;')}}</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', '&lt;image&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Definição inicial. Depois disso, não existe definição explicita do tipo de data <code>&lt;image&gt;.</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("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+</ul>