Un filtre de couleur pour ses photos noir blanc

En complément de l'article Opacité et transparence - Appliquer un filtre, une petite astuce pour appliquer un filtre de couleur à ses photos noir blanc.

Rappelons que le taux d'opacité varie de 0 à 100 sous Internet Explorer et de 0.0 à 1.0 sous Firefox. Une opacité de 80% filtre 20% de lumière.

1. L'image de base

Utilisons l'image de base comme fond d'un bloc div :

<div
style="width: 240px; height: 207px;
background-image: url(URL image de base)">
</div>

240px et 207px étant les dimensions de l'image originale. On obtient :

2. L'application du filtre

Sous Internet Explorer, il faut appliquer un filtre alpha, et utiliser l'instruction opacity sous Firefox

<div
style="width: 240px; height: 207px; filter:alpha(opacity=80);opacity:.80;
background-image: url(URL image de base)"></div>

3. La source de couleur

Créons la source de couleur avec un bloc div de la taille de la photo, de couleur rouge orangé (orangered - #ff4500)

Ce bloc source va servir de conteneur à l'image de base, ce qui donne comme code :

<div style="width: 240px; background-color: #ff4500; margin: auto;">
<div style="width: 240px; height: 207px;
filter:alpha(opacity=80);opacity:.80;
background-image: url(URL image de base)"></div>
</div>

Et le résultat, la photo en sépia :

Le travail de l'Homme

La même photo, en utilisant le vert (#007700) comme source de couleur :

Le travail de l'Homme

Crédit photos : Régis Colombo et Clos Domaines et Châteaux.