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.0`
Aplica-se a	all elements
Inherited	não
Midia	visual
Computed value	the specified value, clipped in the range `[0,1]`
Animation type	a number
Canonical order	the 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

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)