Impostare il colore tramite rgba in CSS

Oltre al formato rgb, esiste il formato rgba, che funziona in modo analogo ma consente di impostare la trasparenza del colore con un quarto parametro. Questo parametro accetta valori frazionari da 0 a 1. In questo caso, uno corrisponde a opacità completa, mentre zero a trasparenza completa.

Vediamo alcuni esempi.

Esempio

Per cominciare, creiamo un blocco opaco come questo:

<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); /* colore rosso */
}

Esempio

Aggiungiamo ora trasparenza al testo:

<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); /* rosso semitrasparente */
}

Esempio

Ora rendiamo il bordo semitrasparente:

<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); /* rosso semitrasparente */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Esempio

Ora creiamo uno sfondo semitrasparente:

<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); /* nero semitrasparente */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Problemi pratici

Imposta ai paragrafi un colore rosso semitrasparente.

Imposta allo sfondo un colore verde semitrasparente.

Imposta al bordo un colore azzurro semitrasparente.