Opacidad (color)

Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color. Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

En CSS3 aparece una variante de la asignación del color mediante la función rgba.

Elemento { color: rgba(rojo,verde,azul,opacidad); }

Para definir un color debemos indicar cuatro valores, los tres primeros son valores enteros entre 0 y 255, que indican la cantidad de rojo, verde y azul. El cuarto valor es un número entre 0 y 1 que indica la opacidad que se aplica al color. Si indicamos un 1 se grafica totalmente opaco (es el valor por defecto) un valor menor hará más transparente el gráfico.

Veamos un ejemplo primero dispondremos un texto dentro de un recuadro que tiene una imagen y no utilizaremos la función rgba para definir la opacidad, sino utilizaremos la función rgb para definir solo el color:

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
rgba(255, 0, 0,1);


rgba(0,255, 0, 0.2);
rgba(0, 255, 0, 0.4);
rgba(0, 255, 0, 0.6);
rgba(0, 255, 0, 0.8);
rgba(0, 255, 0, 1);


rgba(0, 0, 255, 0.2);
rgba(0, 0, 255, 0.4);
rgba(0, 0, 255, 0.6);
rgba(0, 0, 255, 0.8);
rgba(0, 0, 255, 1);