Comment Changer la Couleur de l'image PNG en Utilisant CSS

Dans cet article, nous allons changer la couleur de l'image PNG à l'aide de CSS.

La façon la plus facile se compose d'utiliser la propriété filter pour changer la couleur de l'image png.

La propriété filter applique des effets visuels à un élément (image). Elle a les valeurs suivantes:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

À l'aide de ces valeurs, on peut changer la couleur de l'image.

Les filtres sont une nouvelle chose pour les navigateurs et ils sont supportés dans les navigateurs modernes. Vous pouvez utiliser des filtres avec -Webkit-filter pour Safari, Google Chrome, et Opera.

Changeons la couleur d'une image pas à pas :

1. Créer HTML.

Copiez et collez le lien de votre image dans la partie de corps (body). Ici nous pouvons créer deux images avec les classes "image1" et "image2".

<body>
  <img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" width="500px" height="250px" alt="filter applied" />
  <img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" width="500px" height="250px" alt="filter applied" />
</body>

2. Ajoutez CSS.

Maintenant on ajoute des styles pour "Image1" et "Image2".

Définissez la largeur des deux images avec la propriété width .
Ensuite ajoutez la propriété filter pour changer la couleur de votre image.
Utilisez la valeur "invert" qui inverse les échantillons dans l'image pour la première image. Ici nous définissons 100% qui rend l'image complètement inversé.
Utilisez la valeur "sepia" avec 100% qui rend l'image complètement sepia pour la deuxième image.

<style>
  img {
    width: 40%;
    float: left;
  }
  .image1 {
    filter: invert(100%);
    -webkit-filter: invert(100%);
  }
  .image2 {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
  }
</style>

Donc, voyons le résultat de notre code:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Convertir une image en une couleur différente</title>
    <style>
      img {
        width: 40%;
        float: left;
      }
      .image-1 {
        filter: invert(100%);
        -webkit-filter: invert(100%);
      }
      .image-2{
        filter: sepia(100%);
        -webkit-filter: sepia(100%);
      }
    </style>
  </head>
  <body>
    <h2>Changer la couleur de l'image PNG</h2>
    <img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" width="500px" height="250px" alt="filter applied" />
    <img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" width="500px" height="250px" alt="filter applied" />
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec 8 valeurs de la propriété filter à la fois pour voir comment elles changent la couleur de l'image:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        background-color: #03030a;
        min-width: 800px;
        min-height: 400px;
      }
      img {
        width: 20%;
        float: left;
        margin: 0;
      }
      /*Styles de filtre*/
      .saturate {
        filter: saturate(3);
        -webkit-filter: saturate(3);
      }
      .grayscale {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
      }
      .contrast {
        filter: contrast(160%);
        -webkit-filter: contrast(160%);
      }
      .brightness {
        filter: brightness(0.25);
        -webkit-filter: brightness(0.25);
      }
      .blur {
        filter: blur(3px);
        -webkit-filter: blur(3px);
      }
      .invert {
        filter: invert(100%);
        -webkit-filter: invert(100%);
      }
      .sepia {
        filter: sepia(100%);
        -webkit-filter: sepia(100%);
      }
      .huerotate {
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
      }
      .opacity {
        filter: opacity(50%);
        -webkit-filter: opacity(50%);
      }
    </style>
  </head>
  <body>
    <h2>Changer la couleur de l'image PNG</h2>
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate" />
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity" />
  </body>
</html>

Essayez-vous-même!

Vous pouvez appliquer aussi la téchnique suivante :

Définissez vos éléments <div> dans une séction de corps. Définissez des ids pour votre élément div. Ici on a les IDs "original" et "changed".

<body>
  <div id="original"></div>
  <div id="changed"></div>
</body>

Essayez-vous-même!

Commencez à styler IDs. Définissez filter: hue-rotate; à "changed" ID.

#changed {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}

Alors, voici le résultat:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Convertir une image en une couleur différente</title>
    <style>
      #original,
      #changed {
        background: url("https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg");
        background-size: cover;
        width: 30%;
        margin: 0 10% 0 10%;
        padding-bottom: 28%;
        float: left;
      }
      #changed {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
      }
    </style>
  </head>
  <body>
    <h2>Changer la couleur de l'image PNG</h2>
    <div id="original"></div>
    <div id="changed"></div>
  </body>
</html>

Essayez-vous-même!