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 1O 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
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.