Propriété background-blend-mode CSS

Definition and usage

background-blend-mode The attribute defines the blend mode of each background layer (color and/or image).

See also:

CSS Tutorial:Arrière-plan CSS

Exemple

Specify the blend mode of the background image as "lighten" (brighten):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Essayez-le vous-même

You can see more TIY examples at the bottom of the page.

CSS Syntax

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

Attribute value

Value Description
normal Default. Configure the blend mode to normal.
multiply Configure the blend mode to multiply (multiply).
screen Configure the blend mode to screen (screen).
overlay Configure the blend mode to overlay (cover).
darken Configure the blend mode to overlay (cover).
lighten Configure the blend mode to lighten (brighten).
color-dodge Définir le mode de mélange sur color-dodge (color-dodge).
saturation Définir le mode de mélange sur saturation (saturation).
color Définir le mode de mélange sur color (couleur).
luminosity Définir le mode de mélange sur luminosity (luminosité).

Détails techniques

Valeur par défaut : normal
Héritage : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.backgroundBlendMode="screen"

Plus d'exemples

Exemple

Définir le mode de mélange sur "multiply" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "screen" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "overlay" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "darken" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "color-dodge" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "saturation" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "color" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "luminosity" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Essayez-le vous-même

Exemple

Définir le mode de mélange sur "normal" :

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Essayez-le vous-même

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur prenant en charge cette propriété en intégralité.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1