Propriété CSS mix-blend-mode

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.