Especificar color mediante rgba en CSS

Además del formato rgb, existe el formato rgba, que funciona de manera similar, pero como cuarto parámetro permite especificar la transparencia del color. Este parámetro toma valores fraccionarios de 0 a 1. Donde uno corresponde a opacidad completa, y cero - a transparencia completa.

Veamos algunos ejemplos.

Ejemplo

Para empezar, hagamos un bloque opaco como este:

<div id="parent">
	<div id="elem">
		Lorem ipsum dolor sit amet.
	</div>
</div>

#parent {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 30px;
}
#elem {
	width: 300px;
	height: 200px;
	border: 20px solid red;
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: rgba(255, 0, 0); /* color rojo */
}

Ejemplo

Ahora agreguemos transparencia al texto:

<div id="parent">
	<div id="elem">
		Lorem ipsum dolor sit amet.
	</div>
</div>

#parent {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 30px;
}
#elem {
	width: 300px;
	height: 200px;
	border: 20px solid red;
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: rgba(255, 0, 0, 0.5); /* rojo semitransparente */
}

Ejemplo

Y ahora hagamos un borde semitransparente:

<div id="parent">
	<div id="elem">
		Lorem ipsum dolor sit amet.
	</div>
</div>

#parent {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 30px;
}
#elem {
	width: 300px;
	height: 200px;
	border: 20px solid rgba(255, 0, 0, 0.5); /* rojo semitransparente */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Ejemplo

Y ahora hagamos un fondo semitransparente:

<div id="parent">
	<div id="elem">
		Lorem ipsum dolor sit amet.
	</div>
</div>

#parent {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 30px;
}
#elem {
	width: 300px;
	height: 200px;
	border: 20px solid red;
	background-color: rgba(0, 0, 0, 0.4); /* negro semitransparente */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Problemas prácticos

Asigne a los párrafos un color rojo semitransparente.

Asigne al fondo un color verde semitransparente.

Asigne al borde un color azul claro semitransparente.