Aspectos de Opacidade e Transparência no CSS

No CSS, existem duas formas de trabalhar com transparência: a propriedade opacity e o canal alpha nas cores.

A propriedade opacity

A propriedade opacity define o nível de transparência de um elemento inteiro. O valor vai de 0 (completamente transparente) a 1 (completamente opaco).

Carregando...

Um uso comum é criar efeitos de hover:

Carregando...

opacity afeta tudo dentro do elemento

Esse é o detalhe mais importante: opacity se aplica ao elemento e a todos os seus filhos. Se você aplicar opacity: 0.5 em um div, o texto dentro dele também ficará transparente.

Carregando...

Canal alpha nas cores

Para tornar só o plano de fundo transparente sem afetar o conteúdo, use o canal alpha diretamente na cor com rgba() ou hsla() (mais detalhado no capítulo sobre cores).

Carregando...

O quarto valor do rgba() funciona igual ao opacity: de 0 a 1.

Quando usar cada um

Use opacity quando quiser tornar o elemento inteiro transparente, texto, fundo e tudo mais juntos. Use o canal alpha (rgba, hsla) quando quiser transparência apenas na cor, sem afetar o conteúdo.

Carregando...