Cette petite astuce qui ne prendra pas plus de 3 lignes de code, va vous être sérieusement utile si vous souhaitez changer le fond de plusieurs photos sans passer par la case Photoshop. Bien que le logiciel d’Adobe soit super complet, détourer un fond blanc est long et pas franchement super amusant, surtout quand l’objet principal est de teinte claire.

 

brightness(), fonction CSS

La fonction brightness() permet de modifier la luminosité d’une image. L’idée alors est de la diminuer légèrement sur des images à fond blanc pour leurs donner un fond gris très léger. Dans l’exemple du lion ci-dessus, je me suis permis d’exagérer le réglage afin qu’on se rende bien compte du changement. En revanche un réglage moins prononcé, et donc un gris plus clair, ressortira admirablement bien sur un fond blanc.

La fonction prend en paramètre une valeur numérique, avec ou sans unité.

• avec unité (%), un nombre compris entre 0 et 100
• sans unité, un chiffre décimal compris entre 0 et 1 (1 équivaut à 100%)

Exemple de syntaxe CSS brightness() avec la propriété filter :

filter: brightness(0.98);
filter: brightness(60%);
filter: brightness(0.6);


A l’heure où les sites minimalistes sont tendance, il convient de garder ce petit réglage en tête si jamais vous deviez vous occuper d’un projet nécessitant ce type de modification.