---
title: opacity
slug: Web/CSS/opacity
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>

<h2 id="Sumário">Sumário</h2>

<p>A propriedade CSS <strong>opacity</strong> especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.</p>

<p>O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.</p>

<p>Se você <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">não quer aplicar a opacidade ao elemento filho</a> - use isto:</p>

<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>

<p>Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/Understanding_z_index/O_contexto_de_empilhamento">contexto de empilhamento</a>.</p>

<p>{{cssinfo}}</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush:css">/* Totalmente opaco */
opacity: 1;
opacity: 1.0;

/* Translúcido */
opacity: 0.6;

/* Totalmente transparente */
opacity: 0.0;
opacity: 0;

/* Valores globais */
opacity: inherit;
opacity: initial;
opacity: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>É um {{cssxref("number")}} no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <th>Valor</th>
    <th>Significado</th>
   </tr>
   <tr>
    <td><code>0</code></td>
    <td>O elemento é totalmente transparente (isto é, invisível).</td>
   </tr>
   <tr>
    <td>Qualquer {{cssxref("number")}} entre 0 e 1</td>
    <td>O elemento é translúcido (isto é, o background é visível).</td>
   </tr>
   <tr>
    <td><code>1</code></td>
    <td>O elemento é totalmente opaco (sólido).</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Exemplo_básico">Exemplo básico</h3>

<pre class="brush: css">div { background-color: yellow; }
.light {
  opacity: 0.2; /* Mal consegue ver o texto acima do background */
}
.medium {
  opacity: 0.5; /* Vê o texto mais claramente acima do background */
}
.heavy {
  opacity: 0.9; /* Vê o texto muito claramente acima do background */
}
</pre>

<pre class="brush: html">&lt;div class="light"&gt;Você mal vê isso.&lt;/div&gt;
&lt;div class="medium"&gt;Isso é mais fácil de ver.&lt;/div&gt;
&lt;div class="heavy"&gt;Isso é muito fácil de ver.&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('Basic_example', '640', '64')}}</p>

<h3 id="Opacidade_diferente_com_hover">Opacidade diferente com <code>:hover</code></h3>

<pre class="brush: css">img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 e anteriores */
  zoom: 1; /* Ativa "hasLayout" no IE 7 e anteriores */
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}</pre>

<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
     alt="MDN logo" width="128" height="146"
     class="opacity"&gt;

</pre>

<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Define opacity como animável.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.7")}}<sup>[1]</sup></td>
   <td>9.0<sup>[2]</sup><br>
    8.0<br>
    4.0</td>
   <td>9.0</td>
   <td>1.2 (125)<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1.7")}}<sup>[1]</sup></td>
   <td>9.0<sup>[2]</sup><br>
    8.0<br>
    4.0</td>
   <td>9.0</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<p>[1] Anterior ao Gecko 1.7 (Firefox 0.9) , a propriedade <code>-moz-opacity</code> foi implementada de uma maneira não-padronizada (herdada). Com o Firefox 0.9, o comportamento mudou e a propriedade foi renomeada para <code>opacity.</code> Desde então, <code>-moz-opacity </code>foi suportada somente como um alias para <code>opacity</code>.</p>

<p>Gecko 1.9.1 {{geckoRelease("1.9.1")}} e posteriores não suportam  <code>-moz-opacity</code> e o suporte para <code>MozOpacity</code> no JavaScript foi removido no Gecko 13 {{geckoRelease("13")}}. A partir de agora, você deve simplesmente usar <code>opacity</code>.</p>

<p>[2] Anterior à versão 9, Internet Explorer não suporta <code>opacity</code>, em vez disso ele suporta uma propriedade <code>filter</code> com <code>alpha(opacity=xx)</code> ou <code>"alpha(opacity=xx)"</code> como valor (ambas são sinônimos). Do IE4 até o IE9 foi suportado a forma extendida <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. IE8introduziu <code>-ms-filter</code>, a qual é sinônimo de <code>filter</code>. Ambas foram removidas no IE10.</p>

<p>[3] Similar à <code>-moz-opacity</code>, <code>-khtml-opacity</code> tem estado morta desde o início de 2004 (lançamento do Safari 1.2).<br>
 Konqueror nunca teve suporte para <code>-khtml-opacity</code> e tem suportado a propriedade <code>opacity</code> desde a versão 4.0.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
</ul>