Définition de la couleur via rgba en CSS

En plus du format rgb, il existe le format rgba, qui fonctionne de manière similaire, mais permet de définir la transparence de la couleur via un quatrième paramètre. Ce paramètre accepte des valeurs décimales de 0 à 1. Dans ce cas, un correspond à une opacité totale, et zéro à une transparence totale.

Regardons des exemples.

Exemple

Pour commencer, créons un bloc opaque comme ceci :

<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); /* couleur rouge */
}

Exemple

Ajoutons maintenant de la transparence au texte :

<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); /* rouge semi-transparent */
}

Exemple

Et maintenant, rendons la bordure semi-transparente :

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

Exemple

Et maintenant, rendons le fond semi-transparent :

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

Problèmes pratiques

Définissez une couleur rouge semi-transparente pour les paragraphes.

Définissez une couleur verte semi-transparente pour le fond.

Définissez une couleur bleu clair semi-transparente pour la bordure.