Comment Convertir une Image en Une Image de Niveau de Gris En Utilisant HTML/CSS

Il existe plusieurs moyens de rendre votre image en niveau de gris à l'aide de CSS. Dans ce snippet, nous allons apprendre comment convertir une image colorée en niveau de gris en utilisant les propriétés CSS.

1. Créez HTML

  • Au début, insérez l'image dans la balise <img> pour la convertir.

2. Créez CSS

  • Ensuite, utilisez la valeur "grayscale" de la propriété filter pour la rendre en niveau de gris. La propriété filterapplique des effets visuels à un élément (image).

Donc maintenant voyons un exemple suivant pour voir les détails:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    </style>
  </head>
  <body>
    <h2>Convertir une image en niveau de gris en utilisant HTML/CSS</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" width="400" height="300" alt="tree" />
  </body>
</html>

Voyons un autre exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
      }
      img:hover {
        -webkit-filter: grayscale(0);
        filter: none;
      }
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h2>Convertir une image en niveau de gris en utilisant HTML/CSS</h2>
    <img src=" /uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" width="400" height="300" alt="tree" />
  </body>
</html>
-Webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions) est utilisé avec la proopriété filter.

Une nouvelle façon de rendre l'image en niveau de gris était disponible sur les navigateurs modernes.

La propriété background-blend-mode vous permet d'obtenir quelques effets interessants comme conversion en niveau de gris.

La valeur "luminosity", définie pour l'arrière-plan blanc, permet de le faire.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
        width: 400px;
        height: 300px;
        background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"), #fff;
        background-size: cover;
      }
      .example:hover {
        background-blend-mode: luminosity;
      }
    </style>
  </head>
  <body>
    <h2>Convertir une image en niveau de gris en utilisant HTML/CSS</h2>
    <div class="example"></div>
  </body>
</html>

Vous pouvez animer l'effet en définissant 3 couches. La première est l'image, est la deuxième est le gradient blanc-noir. En appliquant le mode de fusion "Produit" (Blend), vous aurez un résultat blanc comme avant sur la partie blanche, mais l'image originelle sur la partie blanche n'a aucun effet.

Sur la partie blanche du gradient, vous allez avoir le même effet qu'avant. Sur la partie noire du gradient, vous mélangez l'image sur elle-même et le résultat est l'image non modifiée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        width: 450px;
        height: 400px;
      }
      .example {
        background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"), linear-gradient(0deg, white 33%, black 66%), url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
        background-position: 0px 0px, 0px 0%, 0px 0px;
        background-size: cover, 100% 300%, cover;
        background-blend-mode: luminosity, multiply;
        transition: all 1.5s;
      }
      .example:hover {
        background-position: 0px 0px, 0px 70%, 0px 0px;
      }
    </style>
  </head>
  <body>
    <h2>Convertir une image en niveau de gris en utilisant HTML/CSS</h2>
    <div class="example"></div>
  </body>
</html>