w3docs logo

Propriété CSS background-blend-mode

Background-blend-mode est une propriété CSS, qui définit le mélangement de background images l'un avec l'autre et avec background-color. Elle a 10 valeurs: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturnation, color, luminosity. La valeur initiale est "normal".

Valeur initiale normal
Appliquée à Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line.
Héitée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.backgroundBlendMode = "luminosity";

Syntaxe

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: normal;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Dans cet exemple, nous utilisons la valeur "screen". Essayez et voyez comment ça mélange les images du fond.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: screen;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Dans l'exemple suivant, on a défini la valeur "color-dodge".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: color-dodge;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Voyons un autre exemple avec la valeur "multiply".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: multiply;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
normal Définit le mode normal de mélangement.
multiply Définit le mode multiply de mélangement.
screen Définit le mode screen de mélangement.
overlay Définit le mode overlay de mélangement.
darken Définit le mode darken de mélangement.
lighten Définit le mode lighten de mélangement.
color-dodge Définit le mode color-dodge de mélangement.
saturnation Définit le mode saturnation de mélangement.
color Définit le mode color de mélangement.
luminosity Définit le mode luminosity de mélangement.

Support de Navigateurs

chrome firefox safari opera
35+ 30+ 10.1+ 22+

Pratiquez vos connaissances

Qu'est-ce que le mode de fusion d'arrière-plan en CSS et comment l'utiliser?
Trouvez-vous cela utile?