1. Web
  2. CSS
  3. Référence
  4. Propriétés CSS
  5. mix-blend-mode

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

mix-blend-mode

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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.

Exemple interactif

mix-blend-mode: normal; 
mix-blend-mode: multiply; 
mix-blend-mode: hard-light; 
mix-blend-mode: difference; 
<section class="default-example" id="default-example"> <div class="example-container"> <img id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </div> </section> 
.example-container { background-color: sandybrown; }

Syntaxe

css
/* Valeurs de type <blend-mode> */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; /* Valeurs globales */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset;

Valeurs

<blend-mode>

Indique comment la fusion des modes doit intervenir (cf. <blend-mode>).

Définition formelle

Valeur initialenormal
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationNot animatable
Crée un contexte d'empilementoui

Syntaxe formelle

mix-blend-mode = 
 <blend-mode> |
 plus-darker |
 plus-lighter 

<blend-mode> = 
 normal |
 multiply |
 screen |
 overlay |
 darken |
 lighten |
 color-dodge |
 color-burn |
 hard-light |
 soft-light |
 difference |
 exclusion |
 hue |
 saturation |
 color |
 luminosity

Exemples

Exemple avec SVG

SVG

html
<svg> <circle cx="40" cy="40" r="40" fill="red" /> <circle cx="80" cy="40" r="40" fill="lightgreen" /> <circle cx="60" cy="80" r="40" fill="blue" /> </svg>

CSS

css
circle { mix-blend-mode: screen; }

Résultat

Exemple avec HTML

HTML

html
<div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div>

CSS

css
.circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* Without isolation, the background color will be taken into account */ position: relative; }

Résultat

Spécifications

Specification
Compositing and Blending Level 2
# mix-blend-mode

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content