---
title: <image>
slug: Web/CSS/image
tags:
  - CSS
  - CSS imagens
  - Layout
  - Referencia
  - Tipo de data CSS
  - Web
  - graficos
translation_of: Web/CSS/image
original_slug: Web/CSS/imagem
---
<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>