Comment assombrir ou éclaircir une image HTML en CSS ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-03-07 11:20:42
Thèmes : image - html - css
Question

Comment faire pour assombrir ou éclaircir une image HTML en CSS ?

Réponse

Pour assombrir ou éclaircir une image HTML, vous pouvez utiliser la propriété CSS filter associé à la fonction brightness(), et ainsi modifier la luminosité de l'image.

La valeur passée en paramètre dans la fonction brightness() est exprimée en pourcentage. Ainsi et à titre d'exemple une valeur de 50% va diminuer la luminosité par deux, et une valeur de 200% doublera la luminosité.

Dans l'exemple ci-dessous on créé deux CLASS CSS :

  • La CLASS assombrir diminue la luminosité par deux, elle assombrie donc l'image.
  • La CLASS eclaircir augmente la luminosité d'un ratio de 1.5 (150%).

Voici l'exemple correspondant :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment assombrir ou éclaircir une image HTML en CSS ?</title>
<style>
.assombrir { 
filter: brightness(50%);
}
.eclaircir { 
filter: brightness(150%);
}
</style> 
</head>
<body>
<img src="https://www.collaborativejob.com/os.jpg" class="assombrir" alt="1FORMATIK.com">
<br>
<img src="https://www.collaborativejob.com/os.jpg" class="eclaircir" alt="1FORMATIK.com">
</body>
</html>