Propriété mix-blend-mode CSS

Définition et utilisation

L'attribut mix-blend-mode détermine comment le contenu de l'élément doit être mélangé avec le fond de son parent direct.

Veuillez également consulter :

Manuel de référence CSS :Propriété background-blend-mode CSS

Exemple

Un conteneur avec un fond rouge et une image fusionnée avec ce conteneur rouge (clair) :

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Essayer personnellement

Vous pouvez trouver plus d'exemples TIY en bas de la page.

Syntaxe CSS

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|teinte|saturation|couleur|luminosité;

Valeur de l'attribut

Valeur Description
normal C'est la valeur par défaut. Définir le mode de mélange sur normal.
multiply Définir le mode de mélange sur multiply.
screen Définir le mode de mélange sur screen.
overlay Définir le mode de mélange sur overlay.
darken Définir le mode de mélange sur darken.
lighten Définir le mode de mélange sur lighten.
color-dodge Définir le mode de mélange sur color-dodge.
color-burn Définir le mode de mélange sur color-burn.
différence Définir le mode de mélange sur différence.
exclusion Définir le mode de mélange sur exclusion.
teinte Définir le mode de mélange sur teinte.
saturation Définir le mode de mélange sur saturation.
couleur Définir le mode de mélange sur couleur.
luminosité Définir le mode de mélange sur luminosité.

Détails techniques

Valeur par défaut : normal
Héritage : Non
Création d'animation : Non pris en charge. Veuillez consulter :Propriétés liées aux animations.
Syntaxe JavaScript : object.style.mixBlendMode = "darken"

Plus d'exemples

Exemple

Affiche toutes les valeurs :

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Essayer personnellement

Exemple

Utiliser mix-blend-mode pour créer un texte cutout/knockout responsive :

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Essayer personnellement

Support du navigateur

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

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0