Changer la couleur de fond d’une photo sans utiliser Photoshop, en CSS

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.

  • Hm, tu perds beaucoup en luminosité sur le lion au passage. Ca n’affecte pas que le fond mais l’image en entier. Si le site mise sur ses visuels, ca vaut le coup de passer par Photoshop (dans ce cas là, la gomme magique suffit je pense). 🙂

    • Dans l’exemple c’est clairement trop ! J’ai fait exprès pour qu’on distingue bien la différence mais utilisé à faible intensité c’est nickel ! En fait le soucis des outils magiques sur photoshop c’est la gestion quand ton objet est clair et pire quand il comporte du blanc… Tu as beau régler à 30, 10 ou peu importe, ça te donnera pas le résultat voulu…

    • Oui, je suis d’accord, avec un objet clair, c’est pas aussi simple 😉 OK, je garde ça dans un coin.