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 value	`1`
Aplica-se a	all elements
Inherited	não
Percentages	map to the range `[0,1]`
Computed value	The same as the specified value after clipping the `number` to the range [0.0, 1.0].
Animation type	by computed value type

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

opacity = 
  <alpha-value>  

<alpha-value> = 
  <number>      |
  <percentage> (en-US)

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 navegadores

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! (en-US)

Desktop
Dispositivo móvel

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

MSDN Microsoft's filter:alpha(opacity=xx)