Como controlar a transparência de elementos com opacity e cores com canal alpha
No CSS, existem duas formas de trabalhar com transparência: a propriedade opacity e o canal alpha nas cores.
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...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...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.
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...