Teinter une image de fond sans incidence sur le contenu en CSS

En CSS, pour teinter une image de fond sans altérer le contenu du bloc, notamment textuel, l'astuce consiste à utiliser la fonction rgba().

Par exemple, imaginons le code suivant:

<div class="container">
    <p>Bonjour les oiseaux !</p>
    <p>Regardez-les voler vers les nuages.</p>
</div>

.container{
    background-image:url(../oiseaux.jpg);
}

Nous allons créer un nouveau bloc dans lequel nous placerons un fond coloré semi-transparent avec rgba().

<div class="container">
    <div class="container-transparence">
        <p>Bonjour les oiseaux !</p>
        <p>Regardez-les voler vers les nuages.</p>
    </div>
</div>

.container{
    background-image:url(../oiseaux.jpg);
}
.container-transparence{
    background-color:rgba(255, 0, 0, 0.3);
}

Dans cet exemple, nous créons un voile légèrement rouge au-dessus de l'image de fond.
Les 3 premiers paramètres de la fonction rgba() sont les couleurs RVB (rouge, vert et bleu) - 255, 0, 0 correspondant à #ff0000 (rouge) - et le dernier paramètre correspondant à l'opacité, de 0 (transparent) à 1 (aucune transparence).