opacity

Sumário

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

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.

Se você não quer aplicar a opacidade ao elemento filho - use isto:

background: rgba(0, 0, 0, 0.4);

Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo contexto de empilhamento.

Initial value1.0
Aplica-se aall elements
Inheritednão
Midiavisual
Computed valuethe specified value, clipped in the range [0,1]
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

/* 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;

Valores

<number>
É um 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.
Valor Significado
0 O elemento é totalmente transparente (isto é, invisível).
Qualquer number entre 0 e 1 O elemento é translúcido (isto é, o background é visível).
1 O elemento é totalmente opaco (sólido).

Sintaxe formal

<number>

Exemplos

Exemplo básico

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 */
}

<div class="light">Você mal vê isso.</div>
<div class="medium">Isso é mais fácil de ver.</div>
<div class="heavy">Isso é muito fácil de ver.</div>

Opacidade diferente com :hover

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;
}
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
     alt="MDN logo" width="128" height="146"
     class="opacity">

Especificações

Especificação Status Comentário
CSS Transitions
The definition of 'opacity' in that specification.		 Rascunho atual Define opacity como animável.
CSS Color Module Level 3
The definition of 'opacity' in that specification.		 Recomendação Definição inicial.

Compatibilidade com browsers

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 1.0 1.0 (1.7 or earlier)[1] 9.0[2]
8.0
4.0		 9.0 1.2 (125)[3]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 1.0 1.0 (1.7)[1] 9.0[2]
8.0
4.0		 9.0 3.2

 

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

Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) e posteriores não suportam  -moz-opacity e o suporte para MozOpacity no JavaScript foi removido no Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10). A partir de agora, você deve simplesmente usar opacity.

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

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

Veja também

Tópicos relacionados