8 de dezembro de 2008

Uma breve introdução ao Opacity e ao RGBA

A propriedade Opacity diz o quanto opaco um elemento é. Ao declarar o valor 1 para a propriedade opacity, siguinifica que o elemento é completamente opaco; o valor 0 siguinifica que ele é totalmente transparente.

div {
background-color: rgb(255,0,0);
opacity: 1;
}

Firefox, Safari e Opera suportam essa propriedade.

A propriedade RGBA permite modificar a opacidade (pelo canal Alpha) junto com o valor da cor.

div {
background-color: rgba(255,0,0,1);
}

Screenshot de opacity vs. RGBA
A principal diferença entreas duas propriedades é essa:

  • A propriedade opacity é herdada pelos seus "filhos".
  • A propriedade RGBA não é herdada.
Exemplo das propriedades Opacity e RGBA. - Adaptado de A brief introduction to Opacity and RGBA.

2 comentários:

Luis Milanese disse...

Muito bacana a dica. Vou botar em prática assim que possível.

Guido disse...

Obrigado pelo comentário e pela visita. :)