Opacidade - CSS-Tricks | CSS Almanac 2025

A opacitypropriedade em CSS especifica o quão transparente é um elemento.

Uso básico:

div ( opacity: 0.5; )

A opacidade tem um valor inicial padrão de 1 (100% opaco). A opacidade não é herdada, mas porque o pai tem opacidade que se aplica a tudo dentro dele. Você não pode tornar um elemento filho menos transparente do que o pai, sem alguns truques. Os valores são um número de 0 a 1 que representa a opacidade do canal (o canal “alfa”). Quando um elemento tem um valor de 0, o elemento é completamente invisível; um valor de 1 é completamente opaco (sólido).

Confira esta Caneta!

Compatibilidade IE

Se você deseja que a opacidade funcione em todas as versões do IE, a ordem deve ser a seguinte:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Se você não usar essa ordem, o IE8-as-IE7 não aplicará a opacidade, embora o IE8 e um IE7 puro o façam.

Nota sobre os contextos de empilhamento

Se um elemento com opacitye um valor menor que 1 for posicionado, a z-indexpropriedade se aplica conforme descrito em CSS2.1, exceto que o autovalor é tratado como 0, pois um novo contexto de empilhamento é sempre criado.

Opacidade pode ser usada como alternativa à visibilitypropriedade: visibility: hidden;é igual opacity: 0;.