Propriété CSS mix-blend-mode

La propriété mix-blend-mode définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan. Vous devez avoir background-image, background-color ou un <img> pour les mélanger.

Si vous voulez mélanger les images d'arrière-plan de l'élément l'une avec l'autre, vous pouvez utiliser la propriété background-blend-mode.
Valeur initiale normal
Appliquée à Tous les éléments.
Héritée Non.
Animable Non.
Version CSS1
Syntaxe DOM object.style.mixBlendMode = "exclusion";

Syntaxe

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      background-color: #8ebf42;
      height: 800px;
      }
      img {
      width: 100%;
      height: auto;
      float: left;
      mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété mix-blend-mode</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg">
    </div>
  </body>
</html>

Dans l'exemple suivant, mix-blend-mode est définie à "screen":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      background-color: #8ebf42;
      height: 800px;
      }
      img {
      width: 100%;
      height: auto;
      float: left;
      mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété mix-blend-mode </h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg">
    </div>
  </body>
</html>

Ici la valeur "color-dodge" est spécifiée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      background-color: #8ebf42;
      height: 800px;
      }
      img {
      width: 100%;
      height: auto;
      float: left;
      mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété mix-blend-mode</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg">
    </div>
  </body>
</html>

Un autre exemple avec la valeur "hue":

<

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      background-color: #8ebf42;
      height: 800px;
      }
      img {
      width: 100%;
      height: auto;
      float: left;
      mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété mix-blend-mode</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg">
    </div>
  </body>
</html>

Valeurs

Valeur Description
normal Définit le mode de mélangement à normal. C'est la valeur initiale de cette propriété.
multiply Définit le mode de mélangement à multiply.
screen Définit le mode de mélangement à screen.
overlay Définit le mode de mélangement à overlay.
darken Définit le mode de mélangement à darken.
lighten Définit le mode de mélangement à lighten.
color-dodge Définit le mode de mélangement à color-dodge.
color-burn Définit le mode de mélangement à color-burn.
exclusion Définit le mode de mélangement à exclusion.
difference Définit le mode de mélangement à difference.
hue Définit le mode de mélangement à hue.
saturation Définit le mode de mélangement à saturation.
color Définit le mode de mélangement à color.
luminosity Définit le mode de mélangement à luminosity.
initial Fait utiliser la valeur initiale
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

41.0+ 32.0+ 8.0+


Trouvez-vous cela utile?

Articles Associées